React集成Firebase时使用where查询报错：'where' is not defined

错误原因 #

报错'where' is not defined的核心原因是：你使用了Firebase Firestore的where、collection、query、getDocs等方法，但未从firebase/firestore库中导入这些方法。

修复步骤 #

1. 补充Firestore方法导入 #

修改你的Firebase配置文件，在firestore的导入语句中添加需要用到的方法：

import { getFirestore, collection, query, where, getDocs } from "firebase/firestore";

2. 导出所需方法供查询代码使用 #

在配置文件的导出部分，新增这些Firestore方法：

export { firebaseApp, auth, db, storage, collection, query, where, getDocs };

完整修改后的Firebase配置文件 #

import { initializeApp } from "firebase/app";
import { getAuth } from "firebase/auth";
import { getFirestore, collection, query, where, getDocs } from "firebase/firestore";
import { getStorage } from "firebase/storage";

const firebase = {
  apiKey: "xx",
  authDomain: "xx",
  projectId: "xx",
  storageBucket: "xx",
  messagingSenderId: "x",
  appId: "xx",
  measurementId: "G-J7CJWNMETH"
};

const firebaseApp = initializeApp(firebase);
const db = getFirestore(firebaseApp);
const storage = getStorage(firebaseApp);
const auth = getAuth();

export { firebaseApp, auth, db, storage, collection, query, where, getDocs };

3. 在查询代码中导入方法 #

如果查询代码和配置文件不在同一文件，需从配置文件导入所需方法：

import { db, collection, query, where, getDocs } from './你的Firebase配置文件路径';

额外提示 #

你的Firebase安全规则设置为完全开放（allow read, write;），生产环境中存在数据泄露风险，建议根据业务需求配置更严格的权限规则。另外注意集合名comapntList可能是拼写错误（应为companyList？），若实际集合名确实如此可忽略此提示。

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