如何在Firebase Web V9 modular版本中实现动态复合查询？

v9 版本采用函数式编程风格，你可以通过动态构建查询约束数组的方式实现和v8版本完全一致的动态过滤效果，实现代码如下：

// 首先导入需要的模块化API
import { collection, query, where, getDocs } from "firebase/firestore";
import { useState } from 'react';

// 以下状态和你原有逻辑保持一致
const [firstName, setFirstName] = useState('')
const [lastName, setLastName] = useState('')
const [type, setType] = useState('')

const filterResult = async () => {
  // 此处db为项目初始化完成的Firestore实例，和你现有项目配置保持一致即可
  // 1. 获取目标集合引用
  const usersRef = collection(db, 'users');
  // 2. 初始化查询约束空数组
  const constraints = [];
  // 3. 按条件动态追加查询规则
  if(firstName !== ''){
    constraints.push(where('data.first_name', '==', firstName))
  }
  if(lastName !== ''){
    constraints.push(where('data.last_name', '==', lastName))
  }
  if(type !== ''){
    constraints.push(where('data.type', '==', type))
  }
  // 4. 展开约束数组构建最终查询
  const q = query(usersRef, ...constraints);
  // 5. 执行查询获取结果
  const querySnapshot = await getDocs(q);
  // 后续结果处理逻辑和v8完全一致，遍历querySnapshot即可获取数据
  querySnapshot.forEach((doc) => {
    console.log(doc.id, " => ", doc.data());
  })
}

注意：Firebase复合查询的索引规则v9和v8完全通用，如果你需要在查询中增加排序、范围过滤等非等值条件，按v8的规则创建对应索引即可正常使用。

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