ReactJS中使用OR条件的WHERE子句从Firestore查询聊天数据遇问题

问题背景 #

现有代码可正常从Firestore的chats集合获取所有聊天数据，useChats钩子能供其他组件调用并返回数据。需要实现获取所有满足firstPartyUserId = 48 或 secondPartyFullName = 48的聊天数据，但直接拼接多个where条件的写法始终返回undefined。

Firestore集合结构说明：chats集合的文档包含firstPartyUserId（数字类型）、secondPartyFullName（字符串类型）等字段。

无过滤的原始代码 #

import { initializeApp } from "firebase/app";
import { getFirestore, collection } from "firebase/firestore";
import { useCollectionData } from "react-firebase-hooks/firestore";

const FirebaseChats = () => {
  const firebaseConfig = {
        // 你的配置信息
  };

  const app = initializeApp(firebaseConfig);
  const firestore = getFirestore(app);
  
  const chatsRef = collection(firestore, "chats");
  const useChats = () => useCollectionData(chatsRef, { idField: "id" });

  return {app, firestore, useChats, firebaseConfig}
}

export default FirebaseChats;

错误尝试的代码 #

const conditions = [
    where("firstPartyUserId", "==", 48),
    where("secondPartyFullName", "==", "48"),
  ];

const filteredQuery = query(chatsRef, ...conditions);

const [useChats] = useCollectionData(filteredQuery, { idField: "id" });

console.log(useChats);

问题原因 #

Firestore中直接向query传递多个where条件时，默认是逻辑AND关系，即只有同时满足所有条件的文档才会被返回。而你需要的是逻辑OR，这种写法无法实现需求，自然返回空数据或undefined。

另外，useCollectionData是异步加载数据的，组件初始渲染时数据尚未加载完成，此时返回值会是undefined，需结合加载状态判断。

正确解决方案 #

Firestore v9+支持通过or函数构建多字段OR条件查询，以下是修正后的代码：

import { initializeApp } from "firebase/app";
import { getFirestore, collection, query, where, or } from "firebase/firestore";
import { useCollectionData } from "react-firebase-hooks/firestore";

const FirebaseChats = () => {
  const firebaseConfig = {
        // 你的配置信息
  };

  const app = initializeApp(firebaseConfig);
  const firestore = getFirestore(app);
  const chatsRef = collection(firestore, "chats");

  // 封装带OR过滤的useChats钩子
  const useChats = (targetId = 48) => {
    // 构建OR条件：匹配数字类型的firstPartyUserId，或字符串类型的secondPartyFullName
    const filteredQuery = query(
      chatsRef,
      or(
        where("firstPartyUserId", "==", targetId),
        where("secondPartyFullName", "==", String(targetId))
      )
    );
    // 返回useCollectionData的结果：[数据, 加载状态, 错误信息]
    return useCollectionData(filteredQuery, { idField: "id" });
  };

  return { app, firestore, useChats, firebaseConfig };
};

export default FirebaseChats;

使用说明 #

1. 确保导入了or和where函数，这是构建OR查询的关键
2. 注意字段类型匹配：firstPartyUserId是数字，所以用targetId（数字）；secondPartyFullName是字符串，所以用String(targetId)转换为字符串
3. 调用useChats时，可通过参数动态传入目标ID，默认值为48
4. 使用时需判断加载状态，避免在数据未加载完成时访问undefined：

// 在其他组件中调用
const [chats, loading, error] = useChats();

if (loading) return <div>加载中...</div>;
if (error) return <div>加载失败：{error.message}</div>;

// 渲染chats数据

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