如何使用 React 显示 Firestore 数据

【问题标题】：how do I display firestore data with React如何使用 React 显示 Firestore 数据
【发布时间】：2021-06-25 03:07:51
【问题描述】：

我正在尝试使用 React 将我的 Firestore 数据呈现到我的网络应用程序中。

这是我的代码

我在 console.log(posts.id) 时可以看到文档 ID，但是我找不到该文档的内容。

这是文档的内容

【问题讨论】：

【解决方案1】：

获取数据的方法是.data，如：

console.log(posts[0].data())

为每个帖子渲染一些内容可能是这样的：

<p>
{posts.map(doc => {
  const data = doc.data();
  return (
    <div>{data.title}</div>
  )
})}
</p>

就个人而言，除非我需要文档中的数据以外的其他内容，否则我倾向于在将其置于反应状态之前致电.data()。这样我就不需要在每次渲染时都这样做。例如：

useEffect(() => {
  database.posts.get().then(snapshot => {
    setPosts(snapshot.docs.map(doc => doc.data());
  });
});

【讨论】：