Firebase模块化v9报错：Cannot read properties of undefined (reading 'indexOf')

你的代码存在几个关键错误，直接导致了Firebase: Cannot read properties of undefined (reading 'indexOf')报错，以下是修正方案及错误说明：

修正后的完整代码 #

useEffect(() => {
  let unsubscribe;
  
  if (user) {
    // 创建用户订单集合的引用
    const ordersCollRef = collection(db, "users", user.uid, "orders");
    // 创建带排序规则的查询
    const ordersQuery = query(ordersCollRef, orderBy("created", "desc"));
    // 实时监听查询快照
    unsubscribe = onSnapshot(ordersQuery, (snapshot) => {
      const ordersList = snapshot.docs.map(doc => ({
        id: doc.id,
        data: doc.data()
      }));
      setOrders(ordersList);
    }, (error) => {
      console.error("订单监听失败:", error.message);
    });
  } else {
    setOrders([]);
  }

  // 组件卸载时取消监听，避免内存泄漏
  return () => {
    if (unsubscribe) unsubscribe();
  };
}, [user]);

关键错误点说明 #

1. 集合引用与快照获取混淆
   collection()是创建集合引用的方法，不需要await，也不需要搭配getDocs。onSnapshot可以直接接收查询引用实现实时监听，无需提前调用getDocs获取快照。

2. 用户ID字段错误
   原v8代码使用user?.uid，你写成了user?.id，这会导致无法定位到正确的用户文档，引发后续链式调用的未定义错误。

3. Query构建逻辑错误
   query()的第一个参数必须是集合/文档引用，而不是getDocs返回的快照对象，你之前的写法完全颠倒了引用与快照的关系。

4. Snapshot处理错误
   onSnapshot回调中的snapshot是查询快照，需要遍历snapshot.docs才能获取具体文档；你不仅没有正确映射数据，还错误地把onSnapshot返回的取消订阅函数当成快照数据传给了setOrders。

5. 缺少监听清理
   onSnapshot会返回一个取消订阅的函数，必须在useEffect的清理函数中调用，否则组件卸载后监听仍会存在，造成内存泄漏。

内容的提问来源于stack exchange，提问作者Victor Choe