Creo que sé por qué esto no funciona (¿la forma en que Firebase cambió su sintaxis en v9 o algo así?), Pero no estoy seguro de qué cambia. Revisé la documentación, pero todavía estoy confundido.

 import { db } from './firebase.js'; function App() { const [posts, setPosts] = useState([ ]); useEffect(() => { db.collection('posts').onSnapshot(snapshot => { setPosts(snapshot.docs.map(doc => doc.data())); }); }, []);

El error que recibo es este: TypeError no detectado: firebase_js__WEBPACK_IMPORTED_MODULE_3 _.db.collection no es una función o algo similar a esto, excepto por mi .map().

Esta es mi suposición de lo que debería escribir:

 useEffect(() => { const q = query(collection(db, "posts")) setPosts(onSnapshot(q, (querySnapshot) => { console.log("Data", querySnapshot.docs.map(d => doc.data())) })) }, []);

Pero parece que tampoco puedo hacer que esto funcione.

firebase.js en caso de que sea necesario:

 import { initializeApp } from "firebase/app"; import { getFirestore } from "firebase/firestore"; const firebaseConfig = { ... }; const app = initializeApp(firebaseConfig); const db = getFirestore(app); export { db };

(editar) Solución:

 useEffect(() => { const q = query(collection(db, "posts")) onSnapshot(q, (querySnapshot) => { console.log("Data", querySnapshot.docs.map(d => d.data())) }) }, []);