Firebase 9 Firestore如何在React中组合WHERE与ORDERBY查询？

我编写了如下函数，单独使用orderBy或where时可正常获取文档，但同时组合两者时返回null。请问这样的组合方式不可行吗？

调用代码：

const {documents} = useCollection('users', ['name', '==', 'Tom'] ,['age', 'asc'])

自定义Hook代码：

export const useCollection = (collections, _q, _ordBy) => {
    const [documents, setDocuments] = useState(null)
    const [error, setError] = useState(null)
    const q = useRef(_q).current
    const ordBy = useRef(_ordBy).current

    useEffect(()=>{
        let ref = collection(db, collections)

        ref = query(ref, where(...q), orderBy(...ordBy))

        const unsubscribe = onSnapshot(ref, (snapshot)=>{
            let results = []
            snapshot.docs.forEach(doc => {
                results.push({...doc.data(), id: doc.id})
            })
            setDocuments(results)
            setError(null)
        }, (error) => {
            setError('could not fetch')
        })
        return () => unsubscribe()
    }, [collections, q, ordBy])
    return {documents, error}
}

我尝试单独使用orderBy或where均能正常工作，但组合后就返回null。

这不是组合方式不可行，而是Firestore要求同时使用where和orderBy时必须创建对应的复合索引，缺少索引会导致查询静默失败（返回null）。

解决步骤： #

• 打开Firebase控制台，进入你的项目的Firestore数据库页面
• 切换到「索引」标签页，点击「创建索引」
• 选择users集合，依次添加字段：先选name（对应where条件的字段），再选age（排序字段），排序方向设置为升序（asc）
• 保存索引，等待索引构建完成（通常需要1-5分钟）

额外优化： #

可以完善错误处理，打印具体错误信息，方便快速定位问题：

// 修改原代码中的错误回调部分
(error) => {
  console.error('Firestore查询错误:', error)
  setError(`查询失败: ${error.message}`)
}

如果是索引缺失问题，控制台会明确提示需要创建的索引信息，帮助你快速配置。

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