如何在React-Redux项目中借助firestoreConnect获取Cloud Firestore子集合

我帮你梳理下怎么解决这个问题，你现在的代码里firestoreConnect的配置有问题，而且获取子集合的逻辑也需要调整，下面是具体的解决方案：

1. 修正firestoreConnect的配置 #

你当前的firestoreConnect里重复写了collection键，这会导致后面的配置覆盖前面的，而且子集合是属于某个特定project文档的，必须通过指定父文档ID来关联获取。我们可以让firestoreConnect接收一个函数，利用组件的props拿到当前项目的ID，动态请求对应的子集合：

firestoreConnect((props) => {
  const projectId = props.match.params.id;
  return [
    // 获取当前项目的主文档
    { collection: 'projects', doc: projectId },
    // 获取该项目下的subprojects子集合
    {
      collection: 'projects',
      doc: projectId,
      subcollections: [{ collection: 'subprojects' }]
    }
  ];
})

2. 在mapStateToProps中获取子集合数据 #

子集合的数据会被存在state.firestore.data.subprojects里，结构是键为子文档ID、值为子文档数据的对象，我们可以把它转成数组方便组件渲染使用：

const mapStateToProps = (state, ownProps) => { 
  const id = ownProps.match.params.id; 
  const projects = state.firestore.data.projects; 
  const project = projects ? projects[id] : null;
  // 获取子集合数据并转为数组
  const subprojects = state.firestore.data.subprojects 
    ? Object.values(state.firestore.data.subprojects) 
    : [];

  return {
    project,
    subprojects
  };
}

3. 完整的组件代码 #

把两部分整合起来，你的组件代码应该是这样的：

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

const ProjectDetails = ({ project, subprojects }) => {
  // 这里就可以直接使用project和subprojects数据了
  return (
    <div className="project-details">
      {/* 渲染主项目内容 */}
      {project && (
        <div>
          <h2>{project.title}</h2>
          <p>{project.content}</p>
        </div>
      )}
      {/* 渲染子集合列表 */}
      <div className="subprojects">
        <h3>子项目列表</h3>
        <ul>
          {subprojects.map(sub => (
            <li key={sub.id}>{sub.name}</li>
          ))}
        </ul>
      </div>
    </div>
  );
};

const mapStateToProps = (state, ownProps) => { 
  const id = ownProps.match.params.id; 
  const projects = state.firestore.data.projects; 
  const project = projects ? projects[id] : null;
  const subprojects = state.firestore.data.subprojects 
    ? Object.values(state.firestore.data.subprojects) 
    : [];

  return {
    project,
    subprojects
  };
} 

export default compose( 
  connect(mapStateToProps), 
  firestoreConnect((props) => {
    const projectId = props.match.params.id;
    return [
      { collection: 'projects', doc: projectId },
      {
        collection: 'projects',
        doc: projectId,
        subcollections: [{ collection: 'subprojects' }]
      }
    ];
  })
)(ProjectDetails);

关键说明 #

• 当组件的props.match.params.id变化时，firestoreConnect会自动重新请求对应的主文档和子集合数据
• 子集合的数据默认以文档ID为键存储，用Object.values()转成数组更方便渲染列表
• 如果需要对子集合数据做排序或过滤，可以在mapStateToProps里进一步处理，比如根据创建时间排序

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