Tengo una aplicación web que está integrada en Nextjs y usa Firebase Firestore para almacenar datos. Todo lo demás está bien con la aplicación, pero las herramientas que prueban la velocidad del sitio web le otorgan calificaciones horribles, porque las solicitudes a Firestore nunca finalizan a pesar de que la aplicación ya obtuvo todos los datos que necesita en la interfaz.
Mi código para obtener datos:
const getData = () => { const q = query(collection(firestore, "data"), where("published", "==", true)); const data = []; const unsubscribe = onSnapshot(q, (querySnapshot) => { querySnapshot.forEach((doc) => { data.push({id: doc.id, ...doc.data()}); }); }); return data }La función de devolución de datos funciona bien y todo se devuelve rápidamente, pero la solicitud sigue colgada sin terminar. Adjunto una captura de pantalla capturada de Chrome devtools. Imagen: "PRECAUCIÓN: ¡la solicitud aún no ha finalizado!" ¿Cómo hago para que Firestore deje de escuchar los cambios en la base de datos?
Intenté buscar soluciones en todas partes en línea y encontré que algunas personas decían que usaban "const unsubscribe = ..." para definir la consulta y luego llamaban "unsubscribe();" funcionaría, pero llamando a "unsubscribe();" evita que la función devuelva los datos por algún motivo.
Si desea obtener datos solo una vez, utilice getDocs() en su lugar:
const getData = async () => { const q = query(collection(firestore, "data"), where("published", "==", true)); const querySnapshot = await getDocs(q); return querySnapshot.docs.map(doc => ({id: doc.id, ...doc.data()})) } A diferencia onSnapshot() , getDocs() no escuchará actualizaciones en tiempo real. Simplemente puede llamar a getData() nuevamente para recargar los datos. Puede obtener más información sobre cómo obtener datos de Firestore en la documentación .