javascript - "Unhandled Rejection (TypeError): snapshot.data is not a function" when calling Firestore in useEffect

Question

I have a React component rendering cafe' and 'cafe review' data. I'm making two API calls - one to my cafes collection, the the other to my reviews collection, and I've put them both inside a useEffect hook, as follows:

    const [cafe,setCafe] = useState({name:'',photoURL:'',address:'',phoneNumber:'', website:''})
    const [reviews,setReviews] = useState({blurb:'', cafeName:'',stars:'',title:'',userName:''})
    let id = match.params.id

 useEffect(() => {
        db.collection('cafes')
        .doc(id)
        .get()
        .then(snapshot => {
          setCafe({
              name: snapshot.data().name,
              photoURL: snapshot.data().photoURL,
              address: snapshot.data().address,
              phoneNumber: snapshot.data().phoneNumber,
              website: snapshot.data().website
          })
        })

        db.collection('reviews')
        .get()
        .then(snapshot => {
            console.log(snapshot.data())  //*this* yeilds the error
        })
    },[])

The call to the cafes collection is working successfully, and is returning all the data. However the second call to the reviews collection is failing. When I log snapshot.data() to the browser I get the following error:

Unhandled Rejection (TypeError): snapshot.data is not a function

This is strange because performing the equivalent log on the cafes api call successfully shows the object in the browser.

I tried adding some conditional code, which failed to yield any data:

db.collection('reviews')
        .get()
        .then(doc => {
            if(doc && doc.exists){
            console.log(doc.data())
            } else {
                console.log('no doc')
            }
        })

Any suggestions on how I can get both API calls to return data? Am I using useEffect wrong here?

question from:https://stackoverflow.com/questions/65947099/unhandled-rejection-typeerror-snapshot-data-is-not-a-function-when-calling

Answer 1

When you call get() on a collection, you get back a QuerySnapshot - which represents a list of documents. You'll need to loop over that snapshot to get the individual documents, from which you can get the data:

db.collection('reviews')
.get()
.then(snapshot => {
  snapshot.forEach((doc) =>
    console.log(doc.data())
  })
})

As in any of these types of syntax errors, I highly recommend keeping the Firestore reference documentation open - as it's easiest to spot these by following the trail from the CollectionReference.get() call.