Esta es la primera vez que hago una pregunta en StackOverflow. Estoy haciendo un proyecto escolar y soy principiante en Firebase y JavaScript. Estoy tratando de hacer un clon de Tinder. React me dice que hay un error en esta parte de mi código. Al principio tuve diferentes errores, pero estaban relacionados con la sintaxis de Firebase y los arreglé rápidamente, pero ahora no tengo ni idea de lo que significa este error. Mi código funciona en localhost durante una fracción de segundo (veo mi aplicación) y luego aparece el error.
import React, { useEffect, useState } from 'react'; import TinderCard from 'react-tinder-card'; import database from './firebase'; import './SwipeCards.css'; ... function SwipeCards() { ... useEffect(() => { database.collection('buddies').onSnapshot((snapshot) => setBuddies(snapshot.docs.map((doc) => doc.data()))); }, []); ... }Probé dos soluciones de problemas similares que tuvieron otras personas, a saber: (en mi yescaCards.js)
database.firestore().collection('buddies')...y (en mi firebase.js)
import { initializeApp } from 'firebase/app'; import { getFirestore } from 'firebase/firestore'; ... const firebaseApp = initializeApp(firebaseConfig); const database = getFirestore(firebaseApp); export default database;Pero ambos no funcionaron. Puedo publicar más del código si es necesario. Cualquier ayuda sería muy apreciada.
Está usando el nuevo SDK modular (v9) que ya no usa el espacio de nombres firebase.firestore() . Recomiendo seguir la documentación para aprender sobre la nueva sintaxis:
import database from './firebase'; import { doc, onSnapshot, collection, query, where, onSnapshot } from "firebase/firestore"; useEffect(() => { const q = query(collection(db, "buddies")) const unsub = onSnapshot(q, (querySnapshot) => { console.log("Data", querySnapshot.docs.map(d => doc.data())); }); }, [])