React JS 中如何查询 Firebase Cloud Firestore v9 数据并实现条件where子句

基础操作逻辑 #

Firestore v9 采用模块化API设计，带条件的查询需要先将集合引用和where条件组合成完整的查询实例后再执行操作。

操作步骤 #

• 从firebase/firestore导入依赖方法：collection、query、where，以及对应数据获取方法（实时监听用onSnapshot，一次性获取用getDocs）
• 用query()方法组合集合引用和where条件，支持传入多个where子句实现多条件筛选
• 对组合好的查询实例执行数据获取/监听操作

代码示例说明 #

你提供的示例是v8版本的写法，适配v9模块化API的修正代码如下：

import { collection, query, where, onSnapshot } from "firebase/firestore";
import { db } from "./你的firebase初始化文件路径";

useEffect(
  () => {
    // 组合查询规则：查询Article集合中category数组包含Apple的所有文档
    const articleQuery = query(
      collection(db, "Article"),
      where("category", "array-contains", "Apple")
    );
    // 开启实时监听
    const unsubscribe = onSnapshot(articleQuery, (snapshot) => {
      setArticles(
        snapshot.docs.map((doc) => ({
          ...doc.data(),
          id: doc.id,
        }))
      );
    });
    // 组件卸载时取消监听，避免内存泄漏
    return unsubscribe;
  },
  []
);

常见where运算符说明 #

• 基础比较运算符：==、!=、<、<=、>、>=，示例：where("views", ">", 100) 代表筛选浏览量大于100的文档
• 数组专用运算符：array-contains（数组包含指定单个值）、array-contains-any（数组包含指定数组内任意一个值）
• 成员判断运算符：in（字段值属于指定数组范围内）、not-in（字段值不属于指定数组范围内）

多条件查询示例 #

如果需要同时满足多个筛选规则，直接在query方法内追加多个where子句即可，示例如下：

const multiQuery = query(
  collection(db, "Article"),
  where("category", "array-contains", "Apple"),
  where("views", ">", 200),
  where("isOnline", "==", true)
);

注意：如果多条件查询包含范围类运算符（>、<、!=等），需要提前在Firestore控制台创建对应复合索引，查询报错时错误信息会直接给出对应索引的创建入口，按照提示创建即可正常使用。

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