如何在Firebase中使用内联JSX条件表达式进行查询？

问题重现 #

尝试在Firebase查询中用内联条件动态生成where子句，代码如下：

let querySnapshot = await getDocs(query(collection(db, "users"), 
    where(targetChosen === "town"? ("town", "==", user.town) : targetChosen === "city"? ("city", "==", user.city) :  targetChosen === "country" && ("country", "==", user.country) ),
    where("gender", "==", genderChosen),
    orderBy("rating", "desc"),
    limit(10)
))

运行后报错：

function where() called with invalid data.

Unsupported field value: undefined.

补充信息 #

• user对象包含id、name、town、city、country字符串字段
• targetChosen为本地变量，取值仅为"town"、"city"、"country"，随按钮点击切换
• genderChosen取值为"female"或"male"（原描述"name"应为笔误）

错误原因 #

这里有两个JavaScript语法误用问题：

1. 逗号运算符的误区：("town", "==", user.town)这种写法里，逗号运算符会忽略前面的表达式，只返回最后一个值（也就是user.town），导致where()函数只收到一个参数，完全不符合where(field, operator, value)的参数要求。
2. 逻辑运算符错误：最后一个分支用&&是逻辑判断逻辑，不是返回参数组的写法，逻辑完全不成立。

可行解决方案 #

方案1：提前用三元表达式确定参数 #

先把where需要的字段和值提前计算好，再传入函数：

// 动态获取查询字段和对应值
const [queryField, queryValue] = targetChosen === "town" 
  ? ["town", user.town] 
  : targetChosen === "city" 
    ? ["city", user.city] 
    : ["country", user.country];

// 构建查询
let querySnapshot = await getDocs(query(
  collection(db, "users"),
  where(queryField, "==", queryValue),
  where("gender", "==", genderChosen),
  orderBy("rating", "desc"),
  limit(10)
));

方案2：用对象映射简化维护 #

如果后续要增加更多查询选项，用对象映射的方式更清晰，也更容易扩展：

// 建立选项与user字段的映射关系
const fieldMapping = {
  town: user.town,
  city: user.city,
  country: user.country
};

// 直接从映射中取值
const queryField = targetChosen;
const queryValue = fieldMapping[queryField];

// 构建查询
let querySnapshot = await getDocs(query(
  collection(db, "users"),
  where(queryField, "==", queryValue),
  where("gender", "==", genderChosen),
  orderBy("rating", "desc"),
  limit(10)
));

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