React、Firebase、Firestore - 显示所有数据

Question

我做了一个little video 让它更清楚一点。

您可以看到带有 Redux 的 id 系统工作正常（查看 console.log）并且该文档存在于 Firestore 中。但是，当我放置文档 (frontId) 时，什么都不显示。

我所有的代码：

    const frontId  = useSelector(selectFrontId);
    const [frontmessage] = useCollection( 
 db
.collection("front-message")
.doc(frontId)      
      );
      if (currentUser) {
        return (
          <div>
            <h1> Repondre à sa question </h1>
            {frontmessage?.docs.map((doc) => {
         const { title, message, photoURL, name} = doc.data()
        
       return (            
<>
<div>
   <p>  {title} </p>
</div>
</>

  );
})}

数据库结构：

Answer 1

问题出在这段代码中：

{frontmessage?.docs.map((doc) => {

此代码假定frontmessage 是文档列表（或QuerySnapshot），但您的代码实际上只在此处加载单个文档：

db
.collection("front-message")
.doc(frontId)

您需要使用useDocument 挂钩而不是useCollection

const [doc] = useDocument(db.collection("front-message").doc(frontId));
if (currentUser) {
  return (
    <div>
      <h1> Repondre à sa question </h1>
      <>
        <div>
           <p>  {doc.data().title} </p>
        </div>
      </>
  );
}

另请参阅完整的 [usseDocument](https://github.com/CSFrequency/react-firebase-hooks/tree/master/firestore#full-example-1) in the react-firebase-hooks` repo 示例。