React native firebase how to return promise list

Question

I have written a function that fetches items from a firestore database in order of date added. The inner print statement works - it prints out the data in a list as expected. However, when I try to call the function I get a promise.

async function fetch_recent_items(){
    const db = getFirestore(app);
    const col = collection(db, "my col")
    const q = query(col, orderBy("date", "asc"))

    const result = onSnapshot(q, (snapshot) => {
        items = [];
        snapshot.docs.forEach((doc) => {
            items.push(doc.data())
        })

        return items
    })
    console.log(items) // Prints list (desired result)
    return result 
    
}
console.log(fetch_recent_items()) // Prints promise

How do I process this promise and retrieve data from it?

Promise {
  "_U": 0,
  "_V": 0,
  "_W": null,
  "_X": null,
}

• "firebase": "^9.6.3"
• "react-native-web": "0.17.1"
• "react": "17.0.1"

Answer 1

onSnapshot() is used to attach a real-time listener to certain data location.

However, because you are trying to fetch data on-demand, you should be using getDocs() instead to get that data just once.

Remember that the Firebase SDKs are asynchronous APIs. Don't fall into the trap of thinking that just because one line is above another that they will execute in the same order. These APIs must be appropriately chained using .then , .catch and async / await , in addition to making sure you return any Promise chains to the caller. You can read up on Promises here and here , or even have a look at Web Dev Simplified's video series .

async function fetch_recent_items(){
    const db = getFirestore(app)
    const col = collection(db, "my col")
    const q = query(col, orderBy("date", "asc"))

    return getDocs(q)
        .then(querySnapshot => {
            return querySnapshot.docs // gets array of QueryDocumentSnapshot objects
                .map(doc => doc.data()) // consider using ({ id: doc.id, ...doc.data() }) instead
        })
}

fetch_recent_items()
    .then((items) => console.log(items))
    .catch((error) => console.error(error)) // don't forget error handling!

Because you are using async here, you can slightly simplify this to:

async function fetch_recent_items(){
    const db = getFirestore(app)
    const col = collection(db, "my col")
    const q = query(col, orderBy("date", "asc"))

    const querySnapshot = await getDocs(q);

    return querySnapshot.docs // gets array of QueryDocumentSnapshot objects
        .map(doc => doc.data()) // consider using ({ id: doc.id, ...doc.data() }) instead
}

// IF this is also in an async function, but don't make components async! - use useEffect/useAsyncEffect for that
try {
    const items = await fetch_recent_items();
    console.log(items)
} catch (error) {
    console.error(error) // don't forget error handling!
}