React JS：如何查询Firebase中存储的数组字段，筛选包含指定值的文档

你遇到的是Firestore数组字段的匹配逻辑问题：

• 使用==匹配数组字段时，Firestore会要求整个数组的元素、元素顺序完全和查询值一致才会返回对应文档，因此无法匹配「数组包含指定元素」的场景。
• 要查询数组字段包含指定值的文档，需要使用Firestore提供的array-contains操作符。

对应你举例的查询数组包含值1的需求，写法如下：

// 假设数组字段名为nums，查询包含值1的文档
const queryRef = collectionRef.where('nums', 'array-contains', 1);

修正后的业务代码示例 #

const productosRef = db.collection('productosAIB');
// 替换原来的==为array-contains，即可匹配grado数组中包含'4° Grado'的所有文档
const queryRef = productosRef.where('grado', 'array-contains', '4° Grado');

useEffect(() => {
    queryRef.orderBy("precio")
    .get()
    .then((snapshot) => {
        const tempData = [];
        snapshot.forEach((doc) => {
          const data = doc.data();
          tempData.push(data);
        });
        setProductos(tempData);
      });
  }, []);

扩展说明 #

如果你需要查询数组包含多个指定值中任意一个的场景，可以使用array-contains-any操作符，示例如下：

// 查询grado数组包含'4° Grado'或'5° Grado'的文档
const queryRef = productosRef.where('grado', 'array-contains-any', ['4° Grado', '5° Grado']);

注意：查询值的类型要和数组中存储的元素类型保持一致，若数组中存储的是数字类型，查询时不要传入字符串格式的数值，否则会无法命中结果。

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