React-Redux-Firebase数组字段过滤异常及替代方案咨询

核心问题分析 #

你遇到两个关键问题：

• 组合connect与firestoreConnect时，无法获取包含指定数组值的文档；
• 单独使用firestoreConnect能正常显示，但刷新页面后数据消失，且发现参数数量影响刷新后的表现。

针对性解决方案 #

1. 检查Firestore复合索引 #

当同时使用where和orderBy时，Firestore必须创建对应的复合索引，否则查询会静默失败：

• 打开Firestore控制台，进入「索引」标签；
• 创建新复合索引：集合选择projects，字段依次选tags（升/降序不影响array-contains-any）、createdAt（降序），启用索引后等待几分钟生效。

2. 调整compose的执行顺序 #

react-redux-firebase要求firestoreConnect必须放在connect之前，否则会导致数据映射异常：

import { firestoreConnect } from 'react-redux-firebase'
import { compose } from 'redux'

export default compose(
  firestoreConnect([{ 
    collection : 'projects', 
    where:["tags", "array-contains-any", ["stack"]], 
    orderBy: ['createdAt', 'desc'] 
  }]),
  connect(mapStateToProps) // 放在firestoreConnect之后
)(Board);

3. 使用函数式firestoreConnect避免刷新丢失 #

改用函数形式的firestoreConnect，确保组件挂载/刷新时重新触发查询：

firestoreConnect(props => [{ 
  collection : 'projects', 
  where:["tags", "array-contains-any", ["stack"]], 
  orderBy: ['createdAt', 'desc'] 
}])

4. 确认mapStateToProps数据映射正确性 #

检查mapStateToProps是否正确从Redux Store提取projects数据：

const mapStateToProps = (state) => ({
  projects: state.firestore.ordered.projects // 根据你的数据结构选择ordered或data
})

若映射路径错误，即使Firestore查询成功，组件也无法获取数据。

5. 替代方案：使用函数组件与钩子（推荐） #

如果项目允许，改用函数组件搭配useFirestoreQuery钩子，规避高阶组件的顺序问题：

import { useFirestoreQuery } from 'react-redux-firebase'
import { firestore } from '../firebaseConfig' // 导入你的Firestore实例

function Board() {
  const query = useFirestoreQuery(
    firestore.collection('projects')
      .where('tags', 'array-contains-any', ['stack'])
      .orderBy('createdAt', 'desc')
  )

  const projects = query?.data

  return <div>{/* 渲染projects列表 */}</div>
}

验证步骤 #

1. 先确认复合索引已创建并生效；
2. 调整compose顺序后重新测试查询；
3. 检查mapStateToProps的映射路径是否正确；
4. 若仍存在刷新丢失问题，改用函数式firestoreConnect或钩子方案。

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