No puedo entender cuál es el error aquí. Hice el tutorial Firebase/sitio web e hice lo mismo en mi proyecto. Estoy tratando de imprimir la colección que creé en Firebase en mi sitio web de React pero obtuve el error en la línea db.collection: Uncaught (in promise) TypeError: ae.collection is not a function
componente.js:
// React import { useState, useEffect } from "react"; import { db, collection, getDocs } from '../../../firebase.js'; const [holder, setHolder] = useState([]); // update db.collection("holder").onSnapshot((snapshot) => { setHolder( snapshot.docs.map((doc) => ({ id: doc.id, data: doc.data(), })) ); }); console.log({ holder });actualización: firebase.js a continuación
// Import the functions you need from the SDKs you need import { initializeApp } from "firebase/app"; import { getAnalytics } from "firebase/analytics"; import { getFirestore, collection, getDocs } from 'firebase/firestore/lite'; // TODO: Add SDKs for Firebase products that you want to use // https://firebase.google.com/docs/web/setup#available-libraries // Your web app's Firebase configuration // For Firebase JS SDK v7.20.0 and later, measurementId is optional const firebaseConfig = { ... }; // Initialize Firebase const app = initializeApp(firebaseConfig); const analytics = getAnalytics(app); export const db = getFirestore(app);Gracias !
Está utilizando Firebase Modular SDK, que tiene una sintaxis completamente nueva y debe usar la misma en su código. Intenta refactorizar el código a esto:
// React import { useState, useEffect } from "react"; import { db } from '../../../firebase.js'; import { onSnapshot, collection } from 'firebase/firestore' const [holder, setHolder] = useState([]); // update onSnapshot(collection(db, 'holder'), (snapshot) => { setHolder( snapshot.docs.map((doc) => ({ id: doc.id, data: doc.data(), })) ); }) También asegúrese de que su importación de getFirestore sea de firebase/firestore y no de lite en firebase.js o se encontrará con este problema :
import { getFirestore } from 'firebase/firestore';