Next.js 讀取 Firestore 數據

Question

我發現這個 Next.js starter 可以在 Firestore v9 中讀取數據，但它顯示的是 onclick 之后的數據。在 Next.js 中，如果不點擊，我該如何將其寫入實際上是可消費數據？

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 ReadDataFromCloudFirestore

Answer 1

這可以通過簡單地刪除 function 並在頁面打開時運行 try/catch 來完成。

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)
            }
        }

Answer 2

我知道這已經晚了，但您可以嘗試將async添加到箭頭 function 的開頭，這應該可行。

這就是我的意思：

const ReadDataFromCloudFirestore = async () => {


        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)
            }
        }