时间戳

首页 > 解决方案 > Fİrebase 文档参考路径未获取数据

javascript - Fİrebase 文档参考路径未获取数据

问题描述

我有一个基本的firebase问题，你能帮我吗？

我的firebase是这样的：用户>文档（用户ID）>用户信息和其他收集帖子>文档（帖子文档）>帖子内容等。

现在我有一个collectionGroup：

  const postRef = useFirestore().collectionGroup("posts");

  const { status, data } = useFirestoreCollection(postRef);

在此处输入图像描述

我想回去使用这个集合组。我的意思是现在我们正在收集帖子，但我想回去，所以我想去用户部分。我怎样才能做到这一点？Usign reference.path 可能吗？

我的代码：

{data?.docs?.reverse().map((d, index) => {
                return (
                  <>
                    <div className="d-flex justify-content-center">
                      <div className="post__body align-items-center">
                        <div className="post__header">
                          <div
                            className="post__avatar d-flex"
                            style={{
                              padding: "10px",
                              marginLeft: "-10px",
                            }}
                          >
                            <Avatar src={img1} />
                            <h3 className="profile-post-username">
                             {console.log(d.ref.path)}{" "}
                            </h3>
                          </div>
                          <div className="post__headerDescription asd">
                            <div className="">{d.data().content}</div>
                          </div>
                        </div>
                        <img src={d.data().imageURL} alt="" />
                        <div className="post__footer">
                          <FavoriteBorder fontSize="medium" />
                          <Publish fontSize="medium" />
                        </div>
                      </div>
                    </div>

                    <hr></hr>
                  </>
                );
              })}

如果我们看控制台，它会给出：

users/NXh8KBd3OUQA4s8048ADy1KqKn33/posts/riruD1DedJzSmoM
users/AhFDgUrP0oWRNgexbvM6sOuNMAu2/posts/stsMitLGk8VKwHC

现在，使用这些信息，我想获取用户的电子邮件或用户名等。

这里主页： 在此处输入图像描述

如果我这样做，它会为用户提供文档 ID：[！[在此处输入图像描述][3]][3]

更新代码 v2：现在我创建新的 jsx 文档。它的名称用户信息。这里：

const UserInfos = () => {
  const userRef = useFirestore().collection("users");

  const { status, data } = useFirestoreCollection(userRef);

  return (
    <div
      className="post__avatar d-flex"
      style={{
        padding: "10px",
        marginLeft: "-10px",
      }}
    >
      <Avatar src={img1} />
      <h3 className="profile-post-username">
        {data?.docs?.map((index) => index.data().email)}{" "}
      </h3>
    </div>
  );
};

现在，主页代码如下：

 {data?.docs?.reverse().map((d, index) => {
                return (
                  <>
                    <div className="d-flex justify-content-center">
                      <div className="post__body align-items-center">
                        <div className="post__header">
                          <UserInfos/>
                          <div className="post__headerDescription asd">
                            <div className="">{d.data().content}</div>
                          </div>
                        </div>
                        <img src={d.data().imageURL} alt="" />
                        <div className="post__footer">
                          <FavoriteBorder fontSize="medium" />
                          <Publish fontSize="medium" />
                        </div>
                      </div>
                    </div>

                    <hr></hr>
                  </>
                );
              })}

它是这里的截图： 在此处输入图像描述

firestore 结构：（posts 是 collection） 在此处输入图像描述

标签： javascriptreactjsfirebasegoogle-cloud-firestore

解决方案

您正在DocumentReference上寻找parent属性：

const data = "" // assume this as your querySnapshot

const postUser = data.docs[0].ref.parent.parent
// This should be reference to that post's user.

// To get that user's document
const userDoc = await postUser.get()

要获取帖子的用户信息，您可以编写一个将文档快照作为参数的函数：

async function getUserInfo(reference) {
  const userDoc = await reference.parent.parent.get()
  return userDoc
}

getUserInfo(d.ref)

还要看看React Map 中的 API 调用

理想情况下，我会在获取帖子后立即获取用户文档：

const postRef = useFirestore().collectionGroup("posts");

const data = ""  // The querySnapshot
const postDocs = data.docs.map(d => d.data())

const userDocs = await Promise.all(data.docs.map(d => d.ref.parent.parent.get()))

userDocs.forEach((uDoc, i) => {
  postDocs[i] = uDoc.data()
  // Returned values will be in order of the Promises passed, regardless of completion order in Promise.all()
})

推荐阅读