如何正确实现Firebase Firestore条件数据筛选？解决查询报错问题

AI 小北

2026-7-19

问题分析与解决

你遇到的TypeError: null is not an object错误，是因为当city、jobType等筛选变量为空时，city && where(...)这类表达式会返回null/undefined/false，而Firestore的query()函数只接受有效的查询约束对象（比如where()、orderBy()的返回值），无法识别这些无效参数，从而触发报错。

解决方法

先把所有有效的筛选条件收集到一个数组中，再将数组展开传入query()函数，避免传入无效的空值参数。

修改后的代码如下：

const filterData = () => {
    setNoAds(false);
    // 收集有效的查询约束
    const constraints = [];
    if (city) constraints.push(where("city", "==", city));
    if (jobType) constraints.push(where("jobType", "==", jobType));
    if (jobTime) constraints.push(where("jobTime", "==", jobTime));
    if (sex) constraints.push(where("sex", "==", sex));
    // 添加上排序规则
    constraints.push(orderBy("timeStamp", "desc"));

    const q = query(collection(db, "posts"), ...constraints);

    onSnapshot(q, (querySnapshot) => {
      setPosts(
        querySnapshot.docs.map((doc) => ({
          id: doc.id,
          data: doc.data(),
        }))
      );
      if (querySnapshot.size < 1) {
        setNoAds(true);
      }
      setLoading(false);
    });
};