如何使用 React 显示来自 firebase 单个文档的数据？答案

【问题标题】：How to display data from firebase single document using React?如何使用 React 显示来自 firebase 单个文档的数据？
【发布时间】：2021-06-22 07:24:45
【问题描述】：

在此之前，我正在使用快照并尝试对其进行映射。但是对于单个文档它失败了。在我从firebase读回文档之后。他们建议对单个文档使用这种方式。但我不知道如何使它在网站上而不是控制台上可读。我想发送关于标题和论文的数据。

const { id } = useParams()

useEffect(() => {
    db.collection("posts").doc(id).get().then(doc => {
        const newData = doc.data();
        console.log(newData);
    });
}, []);

return (
    <div className="log">
            <article className="log-details">
                <div className="author-pic clearfix">
                    <img src={profile} alt="" />
                </div>
                <div className="log-preview">
                    <div class="cover"></div>
                    <h2 className="title clearfix">title here</h2>

                    <div className="details ">
                        <img src={One} alt="" />
                        <p className="essay">essay here</p>
                    </div>
                </div>
            </article>
    </div>
)

【问题讨论】：

标签： reactjs firebase google-cloud-firestore

【解决方案1】：

要显示帖子数据，请使用 useState 并将 postData 设置为 setPostData(newData)。然后你可以在 return 语句中使用{postData.title} 和{postData.essay} 读取 postData 值。

别忘了用import React, { useState, useEffect } from "react" 导入useState。

const { id } = useParams()
const [postData, setPostData] = useState("");

useEffect(() => {
    db.collection("posts").doc(id).get().then(doc => {
        const newData = doc.data();
        setPostData(newData);
        console.log(newData);
    });
}, []);

return (
    <div className="log">
            <article className="log-details">
                <div className="author-pic clearfix">
                    <img src={profile} alt="" />
                </div>
                <div className="log-preview">
                    <div class="cover"></div>
                    <h2 className="title clearfix">{postData && postData.title}</h2>

                    <div className="details ">
                        <img src={One} alt="" />
                        <p className="essay">{postData && postData.essay}</p>
                    </div>
                </div>
            </article>
    </div>
)

【讨论】：