Firebase v9:在用户需求之后获取文档(带有reactfire)

Question

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

我想得到一个由用户auth id收集的消防站子集合：

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‘的参数不能分配给’CollectionReference‘类型的参数。另一种类型“null”不能用于键入“查询”。

那么，是否有一种方法可以等待"auth“进程，然后再执行所有的防火墙查询？

类似于上述守则：

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为空，将由第一个问题中的防火墙请求填充。

使用这种方法，我如何使它成为只有当数组被填充，所以函数useFirestoreCollectionData()才会被执行？

Answer 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");