如何在react-query-firebase中传入动态auth uid避免查询出现undefined？

你遇到的报错是因为Auth状态还未加载完成时，就尝试访问user.data.uid创建Firestore引用、触发查询导致的，可以通过React Query内置的enabled配置项解决，具体实现如下：

核心原理 #

react-query-firebase的所有查询钩子都继承了React Query的核心配置，其中enabled属性专门用来控制查询是否执行：当值为false时，钩子会直接跳过查询请求，直到值变为true才会触发查询。

实现代码 #

const user = useAuthUser(["user"], auth);
// 用可选链安全获取uid，避免访问undefined属性报错
const uid = user.data?.uid;
// 仅当uid存在时才创建Firestore文档引用
const userDocRef = uid ? doc(firestore, "users", uid) : null;

const product = useFirestoreDocument(
  ["users", uid],
  userDocRef,
  {
    // 仅当uid和文档引用都存在时才启动查询
    enabled: !!uid && !!userDocRef,
    // 可追加其他需要的查询配置，比如缓存时间、重试逻辑等
  }
);

额外适配建议 #

• 页面渲染时可以先判断加载状态，避免空数据渲染异常：

  if (user.isLoading || product.isLoading) {
    return <div>加载中...</div>
  }
  

• 所有嵌套属性访问都用可选链?.处理，从根源避免undefined属性访问报错。

内容的提问来源于stack exchange，提问作者Lukas Vis