React Firestore useEffect访问用户集合时出现'undefined indexOf'错误

错误根源 #

你碰到的问题核心有两个：

1. 误用await：user.uid是同步属性，不是异步Promise，加await完全没必要，反而会干扰逻辑执行。
2. 未校验uid有效性：首次渲染时用户身份可能还没加载完成，user.uid会是undefined，把undefined传给Firestore的collection()方法，会直接导致路径解析失败（也就是报错里的indexOf找不到属性，因为路径段是无效值）。

修复后的代码 #

useEffect(() => {
  const getData = async () => {
    // 先校验uid是否存在，不存在直接终止函数
    if (!user?.uid) return;
    
    const uid = user.uid; // 直接取值，无需await
    console.log(uid);
    
    // query是同步函数，不用加await
    const q = query(collection(db, 'userData', uid, 'todos'));

    const unsubscribe = onSnapshot(q, (querySnapshot) => {
      let todosArr = [];
      querySnapshot.forEach((doc) => {
        todosArr.push({...doc.data(), id: doc.id})
      });
      setTodos(todosArr)
    });
    return () => unsubscribe();
  }
  
  getData();
}, [user.uid]);

关键修改说明 #

• 增加uid有效性校验：用可选链user?.uid判断，确保只有当uid存在时才执行后续Firestore操作，避免传入无效参数触发报错。
• 移除多余的await：user.uid和query()都是同步操作，去掉不必要的await让逻辑更清晰。
• 保留user.uid作为依赖项：这样用户身份切换时，useEffect会自动重新执行，获取对应用户的待办数据。

如果问题仍存在，可以额外检查：

• 确认db实例是否正确初始化并传入组件
• 确认用户上下文（user对象）的加载时机，是否在组件渲染时还未完成登录状态同步

内容的提问来源于stack exchange，提问作者Tyler R