如何从firebase v9检索数据以在前端显示？

Question

嗨，我有一份联络表格，我连接到了消防基地。现在，我希望能够使用这些数据并在浏览器中显示。我尝试了这么多方法，但都没有用。所以现在我在寻求你的帮助。

该集合称为messages

下面是我如何将联系人表单连接到firebase的代码：

import {addDoc, collection} from '@firebase/firestore'
import {db} from '../firebase'

    const [fullName, setFullName] = useState("")
    const [email, setEmail] = useState("")
    const [phone, setPhone] = useState("")
    const [company, setCompany] = useState("")
    const [service, setService] = useState("")
    const [msg, setMsg] = useState("")

        const docRef = await addDoc(collection(db, 'messages'), {
            Email: email,
            Nom: fullName,
            Message: msg,
            Service: service,
            Téléphone: phone,
            Société: company
        })

下面是我从firebase检索数据的尝试：

import { db } from "../firebase"
import { useState, useEffect } from "react"
import {
    onSnapshot,
    collection,
} from "@firebase/firestore"

const messages = () => {
    const [messages, setMessages] = useState([])

    useEffect(() =>
        onSnapshot(collection(db, "messages"),
            (snapshot) => {
        setMessages(snapshot.docs)
            }
        ),
            [db]
      )


    return (
        <div>
            {messages.map((message) => {
                <div>
                    <h1>{message.Email}</h1>
                </div>
            })}
        </div>
    )
}

export default messages

Answer 1

我认为大多数情况下，您没有将data()从onSnapshot处理程序中的DocumentSnapshot中展开。如果这确实是唯一的问题(很难通过一些更多的细节来确定，例如查看文档的样子)，那么它将被修正为：

(snapshot) => {
  setMessages(
    snapshot.docs.map(doc => { 
      return { id: doc.id, ...doc.data() } 
    }) 
  )
}