Estoy aprendiendo a usar Cloud Firestore de Firebase combinado con React JS. Para empezar, vea cómo se ven mis datos de Cloud Firestore... Estaba leyendo la documentación de V9 pero aún tenía problemas. Enlace a -> Documentos de Firebase: Escuche varios documentos en una colección

¡De hecho, incluso copié y pegué lo que leí y funcionó! ¡¡PERO!! Solo por un breve momento. No estaba seguro si cambié el código por accidente. Dado que, por alguna razón, no se estaba procesando en el dom, consolé. Logré algunos elementos y mostró que algo estaba sucediendo. ¡Pude ver valores de datos en la consola! Pero todavía no se estaba renderizando nada. Aquí está mi código... y capturas de pantalla de mi consola.

 const firebaseApp = initializeApp({ apiKey: "Hidden", authDomain: "Hidden", projectId: "Hidden", }); const db = getFirestore(); const [dataFB, set_dataFB] = useState([]); async function getSomethingTEST() { let items = []; const q = await query(collection(db, "WNA-Pasteur-Items")); await onSnapshot(q, (querySnapshot) => { querySnapshot.forEach((doc) => { items.push(doc); // <-- Here I also tried doc.data().nameENG }); // And was able to see the specific values in the console. console.log("What is inside: ", items.join(", ")); }); set_dataFB(items); } useEffect(() => { getSomethingTEST(); }, []);

El primer console.log con solo elementos de doc, obtuve esto ... El segundo console.log con doc.data().nameENG , obtuve esto...

Luego, con mi código JSX se veía así.

 <p>please work</p> {dataFB.map((e) => ( <div key={e.id}> <h3>{e.nameENG}</h3> </div> ))}

Que rindió esto...