How do I get data on a specific id from firestore in react?

Question

I trying to figure out how I can get data from only one id from firestore. When clicking on my edit button I want my react website to route to another page where my input fields is filled in with my values from a specific id. I have solved how to get my id from a specifc id from firestore in my url after clicking on edit button.

How can I get only data from my specfic id that I click on/same id that pops up in the url?

Works fine to get spec. id in url.

But when trying to get all data from a specific id from firestore I fail. This is my code that are failing.

const _id = props.match.params.id;
console.log("Logged data in edit:", _id);

const ref = firebase.firestore().collection("suggestions").doc(_id); 

function getRestaurants() {
    ref.get().then(querySnapshot => setData((querySnapshot).data()))
   console.log(ref.data)
}

I'm getting the data, but I'm not able to write/edit the input fields.

Answer 1

.doc().get() DOES NOT return a querySnapshot, it returns a DocumentSnapshot, and I don't think your ````(querysnopshot).data()``` does quite what you want. Without a lot more info about the scope/context of that fragment it's hard to say what will be valid. I assume setData is defined... somewhere?

Also, ref.data() is not a thing - ref is not changed nor updated by the .get() method. And also again, the result of the .get() (it isn't a query) is not available outside your .then()

I expect you will need to at least :

const _id = props.match.params.id;
console.log("Logged data in edit:", _id);

const ref = firebase.firestore().collection("suggestions").doc(_id); 

function getRestaurants() {
    ref.get().then(DocumentSnapshot => {
       const docData = querySnapshot.data();
       setData(docData);
      console.log(docData);
   })
}