He escrito una función que obtiene elementos de una base de datos de Firestore en el orden de la fecha en que se agregaron. La declaración de impresión interna funciona: imprime los datos en una lista como se esperaba. Sin embargo, cuando trato de llamar a la función, recibo una promesa.
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¿Cómo proceso esta promesa y recupero datos de ella?
Promise { "_U": 0, "_V": 0, "_W": null, "_X": null, }onSnapshot() se usa para adjuntar un oyente en tiempo real a cierta ubicación de datos.
Sin embargo, debido a que está tratando de obtener datos a pedido, debe usar getDocs() en su lugar para obtener esos datos solo una vez.
Recuerde que los SDK de Firebase son API asíncronas. No caiga en la trampa de pensar que solo porque una línea está encima de otra, se ejecutarán en el mismo orden. Estas API se deben encadenar correctamente mediante .then , .catch y async / await , además de asegurarse de devolver las cadenas de Promise a la persona que llama. Puede leer sobre Promises aquí y aquí , o incluso echar un vistazo a la serie de videos de Web Dev Simplified .
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! Debido a que está utilizando async aquí, puede simplificar ligeramente esto a:
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! }