Encontré este iniciador Next.js para leer datos en Firestore v9, pero muestra datos después de hacer clic. En Next.js, ¿cómo escribiría esto para que sean realmente datos consumibles sin hacer clic?
import { db } from '@/lib/firebase/initFirebase' import { doc, getDoc } from "firebase/firestore" import { useUser } from '@/lib/firebase/useUser' import Button from 'react-bootstrap/Button' const ReadDataFromCloudFirestore = () => { const { user } = useUser() const readData = async () => { try { const userDoc = doc(db, "myCollection", user.id) await getDoc(userDoc).then((doc) => { if (doc.exists()) { console.log(doc.data()) } }) alert('Data was successfully fetched from cloud firestore! Close this alert and check console for output.') } catch (error) { console.log(error) alert(error) } } return ( <div style={{ margin: '5px 0' }}> <Button onClick={readData} style={{ width: '100%' }}>Read Data From Cloud Firestore</Button> </div> ) } export default ReadDataFromCloudFirestoreEsto se puede lograr simplemente eliminando la función y ejecutando try/catch cuando se abre la página.
const ReadDataFromCloudFirestore = () => { const { user } = useUser() try { const userDoc = doc(db, "myCollection", user.id) await getDoc(userDoc).then((doc) => { if (doc.exists()) { console.log(doc.data()) } }) alert('Data was successfully fetched from cloud firestore! Close this alert and check console for output.') } catch (error) { console.log(error) alert(error) } }