reactjs - 如何使用 React 显示 Firestore 数据

Question

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

这是我的代码

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

这是文档的内容

标签： reactjsdatabasegoogle-cloud-firestore

Answer 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());
  });
});