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

Question

嗨，我有一个连接到firebase的联系人表单。现在我希望能够使用这些数据并在浏览器中显示。我试了很多方法，但都无济于事。所以我现在寻求你的帮助。

集合称为消息

下面是我如何连接联系人表单到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

我认为大多数情况下，您没有从onSnapshot处理程序中的DocumentSnapshot中展开data()。如果这确实是唯一的问题(很难通过更多细节来确定，例如查看文档的外观)，则可以使用:

来修复它。

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