从 Firebase 查询返回结果数组

Question

I'm using the @react-native-firebase wrapper to interact with Firebase's Firestore. I have a function which performs some querying to one of my collections and the intended response should be an Array object containing each found document.

My function currently looks like:

export const backendCall = async => {
  let response = [] 
  firestore()
  .collection('collection')
  .where('id', '==', 1)
  .onSnapshot(documentSnapshot => {
    documentSnapshot.forEach(x => response.push(x.data())) 
  })
  return response 

On my UI, I use a react-native Button component which calls this function onPress :

<Button 
  title="get" 
  onPress={() => {
    backendCall().then(response => console.log(response)) 
  }}
/> 

Using console.log I am able to observe the expected Array object (but with a "value below was evaluated just now" icon. If however, I change the onPress to console.log(JSON.stringify(response)) , the Array object is empty.

I'm assuming this has something to do with the async calls but I can't quite figure out how to fix it. Would appreciate some pointers.

Answer 1

You're returning the response without waiting for the result from your firebase query. To wait for the response to arrive before returning, you can use Promise.

export const backendCall = () => {
    return new Promise(resolve => {
        firestore()
            .collection('collection')
            .where('id', '==', 1)
            .onSnapshot(documentSnapshot => {
                const response = []
                documentSnapshot.forEach(x => response.push(x.data()))
                resolve(response)
            })
    })
}

You can use Array.map to make the for loop looks nicer.

const response = documentSnapshot.map(x => x.data())
resolve(response)

Answer 2

You can also read docs from a QuerySnapshot :

export const backendCall = async () => {
  const qs = firestore().collection('collection').where('id', '==', 1).get()
  return qs.docs.map(x => x.data())
}