Firebase v9：在用户身份验证后获取文档（使用 reactfire）答案

【问题标题】：Firebase v9: Get documents after user auth (with reactfire)Firebase v9：在用户身份验证后获取文档（使用 reactfire）
【发布时间】：2022-01-12 19:39:12
【问题描述】：

我正在使用带有 React (Next.js) 和 ReactFire 的新 Firebase SDK v9。

我想通过用户 auth id 获取 firestore 子集合：

import { useFirestore, useFirestoreCollectionData, useSigninCheck } from "reactfire";
import { collection } from "firebase/firestore";

export default function TestComponent() {
  /** Get user data from firebase auth */
  const { data: userAuthData } = useSigninCheck();

  /**
   * Get data from firestore
   * Reactfire example: https://github.com/FirebaseExtended/reactfire/blob/main/example/withoutSuspense/Firestore.tsx#L12-L14
   */
  const userRef = collection(useFirestore(), "users", userAuthData?.user?.uid, "my-sub-collection");
  const { data: userFirestoreData } = useFirestoreCollectionData(userRef);

  return <div>TestComponent</div>;
}

问题是在collection()函数中userAuthData?.user?.uid不能是null。于是尝试了以下方法：

import { useFirestore, useFirestoreCollectionData, useSigninCheck } from "reactfire";
import { collection } from "firebase/firestore";

export default function TestComponent() {
  /** Get user data from firebase auth */
  const { data: userAuthData } = useSigninCheck();

  /** Get data from firestore */
  const firestore = useFirestore();
  /** Change here: */
  const userRef = userAuthData?.user?.uid ? collection(firestore, "users", userAuthData.user.uid, "my-sub-collection"): null;
  const { data: userFirestoreData } = useFirestoreCollectionData(userRef);

  return <div>TestComponent</div>;
}

仅当userAuthData?.user?.uid 不是false 时，才会执行collection() 函数。

但在此尝试中，函数 useFirestoreCollectionData() 给出了错误：

TS2345：'CollectionReference | 类型的参数null' 不可分配给“查询”类型的参数。类型 'null' 不能分配给类型 'Query'。`

那么，有没有办法等待“身份验证”过程，然后再进行所有的 Firestore 查询？

类似于上面的代码：

import { useFirestore, useFirestoreCollectionData, useSigninCheck } from "reactfire";
import { collection, query, where } from "firebase/firestore";

export default function TestComponent() {
  /** ...Same code from question 1 here... **/

  /** This array is filled by code, which I have omitted for clarity */
  let serverIds: string[] = [];

  const serverRef = collection(useFirestore(), "server");
  const serverQuery = query(serverRef, where("server_id", "in", serverIds));
  const { data: serverData } = useFirestoreCollectionData(serverQuery);

  return <div>TestComponent</div>;
}

信息：在where() 函数中，"server_id" 故意不是文档的 id，而是一个字段。

数组serverIds 为空，将由第一个问题的firestore 请求填充。

用这种方法，我怎样才能做到只有当数组被填充时，函数useFirestoreCollectionData()才会被执行？

【问题讨论】：

在 Stack Overflow 上，每个帖子只回答一个问题。除非您将其编辑为两个不同的帖子，否则您拥有的权利将被关闭为“需要关注”。

标签： reactjs google-cloud-firestore firebase-authentication reactfire

【解决方案1】：

我也想这样做，但在 github 上看到这个问题： https://github.com/FirebaseExtended/reactfire/issues/463 这说明维护人员不想允许这样做。

我建议在用户未登录时尝试收听空集合，以便阅读。比如：

const userRef = userAuthData?.user?.uid ? collection(firestore, "users", userAuthData.user.uid, "my-sub-collection"): collection(firestore, "empty");

【讨论】：