如何从Firebase v9获取Firestore数据并在React前端展示？

你的代码存在3处核心错误，修改后即可正常渲染Firebase中的表单数据：

1. Firestore返回的QueryDocumentSnapshot对象需要调用.data()方法才能获取你存储的业务字段，直接访问message.Email无法读取到存的内容
2. 渲染列表的map回调函数没有返回JSX元素，所以页面不会展示内容
3. React组件名必须首字母大写，小写的messages会被识别为原生HTML标签，触发渲染异常

修正后的完整代码 #

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

// 组件名首字母大写符合React规范
const Messages = () => {
    const [messages, setMessages] = useState([])

    useEffect(() => {
        // 存储监听取消函数，后续组件卸载时调用避免内存泄漏
        const unSubscribe = onSnapshot(collection(db, "messages"),
            (snapshot) => {
                // 遍历文档时调用.data()获取存储的字段，同时保留文档id作为渲染key
                setMessages(snapshot.docs.map(doc => ({
                    id: doc.id,
                    ...doc.data()
                })))
            }
        )
        return () => unSubscribe()
    }, [db])

    return (
        <div>
            {/* map回调增加return语句，绑定唯一key属性 */}
            {messages.map((message) => {
                return (
                    <div key={message.id}>
                        <h1>{message.Email}</h1>
                        {/* 可按需渲染其他你存储的字段
                        <p>姓名：{message.Nom}</p>
                        <p>留言内容：{message.Message}</p>
                        <p>联系电话：{message.Téléphone}</p>
                        <p>所属公司：{message.Société}</p>
                        <p>所需服务：{message.Service}</p>
                        */}
                    </div>
                )
            })}
        </div>
    )
}

export default Messages

可选优化 #

可以在访问字段时加可选链?.，避免数据结构异常时页面白屏，比如写法调整为{message?.Email}。

内容的提问来源于stack exchange，提问作者Salma EL BARMAKI