React Native接入Firebase时Firestore数组查询及分页实现相关问题

问题1：数组类型字段包含查询实现 #

Firestore 提供了专门的 array-contains 操作符用来筛选数组字段包含指定值的文档，你原来使用的 >= 比较操作符不支持数组包含匹配逻辑，直接修改 where 条件即可：

firestore()
        .collection(COLLECTION)
        // 替换原有>=条件为array-contains
        .where("types", "array-contains", 'lDQJJnsq2osTIWCPLMRg')
        .get()
        .then(querySnapshot => {
            const arr = []
            querySnapshot.forEach(documentSnapshot => {
                const data = documentSnapshot.data()
                const el = {id: documentSnapshot.id, ...data}
                arr.push(el)
            })
            resolve(arr)
        })
        .catch(err => {
            console.log('err ', err )
            reject()
        });

如果后续需要同时匹配多个数组值，可以改用 array-contains-any 操作符，传入数组格式的多个目标值即可。

问题2：分页方案可行性 #

使用 startAt 做分页是官方推荐的可行方案，适配移动端场景完全没问题，注意几个避坑点即可：

1. 必须先对查询做 orderBy 排序，没有排序规则的情况下 startAt 不会生效，你可以按文档创建时间、文档ID或者其他业务字段排序
2. 更推荐使用 startAfter 代替 startAt，可以避免分页边界处上一页最后一条数据重复出现的问题
3. 分页游标直接使用上一次查询返回的最后一条文档快照对象即可，不需要手动拼接字段值，出错概率更低

参考分页写法示例：

// 存储上一页最后一条文档快照作为游标
let lastDoc = null

// 第一页查询
const getFirstPage = async () => {
  const res = await firestore()
    .collection(COLLECTION)
    .where("types", "array-contains", 'lDQJJnsq2osTIWCPLMRg')
    .orderBy("createTime") // 替换为你实际需要的排序字段
    .limit(10) // 每页条数按需调整
    .get()
  lastDoc = res.docs[res.docs.length - 1]
  // 处理返回数据逻辑
}

// 下一页查询
const getNextPage = async () => {
  const res = await firestore()
    .collection(COLLECTION)
    .where("types", "array-contains", 'lDQJJnsq2osTIWCPLMRg')
    .orderBy("createTime")
    .startAfter(lastDoc) // 传入上一页游标
    .limit(10)
    .get()
  lastDoc = res.docs[res.docs.length - 1]
  // 处理返回数据逻辑
}

内容的提问来源于stack exchange，提问作者rop lop fan