从Firestore查询数据并打印时遇FirebaseError问题求助

问题根源 #

1. API混用冲突：你同时用了Firestore的两种API风格——模块化API（import { collection } from 'firebase/firestore'）和旧命名空间API（firestore().collection()），两种方式参数要求不同，直接混用导致类型不匹配报错。
2. 清理逻辑错误：你把get()返回的Promise赋值给max，然后在useEffect的清理函数里调用max()，但Promise不是可执行函数，这会引发额外错误。
3. 可能的实例初始化问题：如果db实例没通过getFirestore(app)正确初始化，collection()会收到无效参数。

分步修复 #

1. 确认Firestore实例初始化正确 #

首先检查你的../../firebase/firestore文件，必须用模块化API初始化：

import { initializeApp } from "firebase/app";
import { getFirestore } from "firebase/firestore";

// 替换成你的Firebase配置
const firebaseConfig = {
  apiKey: "YOUR_API_KEY",
  authDomain: "YOUR_AUTH_DOMAIN",
  projectId: "YOUR_PROJECT_ID",
};

const app = initializeApp(firebaseConfig);
export const db = getFirestore(app); // 关键：用getFirestore获取合法实例

2. 修正组件中的查询代码 #

用纯模块化API重构查询，同时移除错误的清理逻辑（一次性查询不需要取消订阅）：

import { collection, query, where, getDocs } from 'firebase/firestore';
import { db } from '../../firebase/firestore';
import { useEffect } from 'react';

useEffect(() => {
  // 封装查询逻辑为异步函数
  const fetchUserReps = async () => {
    // 模块化API必须用query()组合查询条件
    const userQuery = query(
      collection(db, 'UsersData'),
      where('Reps', '==', 4)
    );

    try {
      const querySnapshot = await getDocs(userQuery);
      // 遍历打印结果
      querySnapshot.forEach(doc => {
        console.log('用户ID:', doc.id);
        console.log('用户数据:', doc.data());
      });
    } catch (err) {
      console.error('查询失败:', err);
    }
  };

  // 执行查询
  fetchUserReps();
}, []);

关键注意点 #

• 模块化API中，不能直接链式调用collection().where()，必须用query()函数把集合和查询条件组合起来。
• getDocs()是模块化API中获取一次性查询结果的方法，替代旧API的get()。
• 只有实时监听（比如onSnapshot）才需要返回取消订阅函数，一次性查询不需要清理逻辑。
• 彻底放弃旧的firestore().collection()写法，和模块化API彻底兼容。

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