Firestore查询中如何结合where()与array-contains遍历数组筛选事件

你需要用Firestore的array-contains-any操作符，它专门用来匹配字段值等于数组中任意一个元素的文档，正好符合你的需求，而且不需要写多个where()条件。

修改后的核心查询代码 #

把原来的单个array-contains替换成array-contains-any，直接传入整个events数组即可：

const q = query(
    dbRef, 
    where("cityName", "==", selectedCity), 
    where("category", "array-contains-any", events), // 关键修改
    orderBy("timestamp", "desc")
);

完整优化后的getPostsAPI函数 #

另外你的快照监听逻辑存在重复添加数据的问题，每次快照更新时需要重新初始化data数组，同时建议返回取消订阅函数避免内存泄漏，修正后的完整代码如下：

const getPostsAPI = async () => {
    const unsubscribe = onSnapshot(
        query(
            dbRef, 
            where("cityName", "==", selectedCity), 
            where("category", "array-contains-any", events),
            orderBy("timestamp", "desc")
        ), 
        (querySnapshot) => {
            const data = []; // 每次快照更新时重置数组
            querySnapshot.forEach(doc => {
                const docData = doc.data();
                data.push({ 
                    companyName: docData.companyName,
                    endTime: docData.endTime,
                    eventAddress: docData.eventAddress,
                    eventDescription: docData.eventDescription,
                    startTime: docData.startTime,
                    startDay: docData.startDay,
                    timestamp: docData.timestamp,
                    username: docData.username,
                    venueName: docData.venueName,
                    imageLink: docData.imageLink,
                    startMonth: docData.startMonth,
                    startDate: docData.startDate,
                    title: docData.title,
                    cityName: docData.cityName,
                    videoLink: docData.videoLink,
                });
            });
            setPostsList(data);
        }, 
        (error) => {
            console.log(`PostAPI error: ${error}`);
        }
    );
    return unsubscribe; // 返回取消订阅函数，组件卸载时调用
};

关键注意点 #

• array-contains-any最多支持传入10个元素的数组，刚好匹配Firestore的查询条件数量限制，完全适配你的场景。
• 确保category字段是单个字符串值：如果你的活动文档中category是数组类型（比如一个活动属于多个类别），则需要改用array-overlap操作符来匹配数组有交集的文档。

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