组件结构如下：

仪表板 -项目清单 - 项目总结 -评论

我已在Dashboard组件内部使用firestoreConnect加载了名为 Projects 的集合，并将数据传递到 Project列表 项目摘要 。评论是 项目摘要

的子组件

我的firestore集合结构如下：

项目 --project1 -评论

仪表板：

class Dashboard extends Component {
  render() {
    const { projects, auth, notifications } = this.props
    if (!auth.uid) return <Redirect to='/signin' />
    return(
      <div className="dashboard container">
        <div className="row">
          <div className="col s12 m8 offset-m2 l8">
            <ProjectList projects={projects} />
          </div>
          <div className="col s12 offset-m1 hide-on-med-and-down l4">
            <Notification notifications={notifications} />
          </div>
        </div>
      </div>
    )
  }
}

const mapStateToProps = (state) => {
  // console.log("ref: ",state)
  return {
    projects: state.firestore.ordered.projects,
    initials: state.firebase.profile.initials,
    auth: state.firebase.auth,
    notifications: state.firestore.ordered.notifications
  }
}

export default compose (
  connect(mapStateToProps),
  firestoreConnect([
    { collection: 'projects', orderBy: ['createdAt', 'desc'] },
    { collection: 'notifications', limit: 3, orderBy: ['time', 'desc'] }
  ])
)(Dashboard)

项目列表组件：

const ProjectList = ({ projects }) => {
  return(
    <div className="project-list section">
      {projects && projects.map((project) => {
        return(
          <div key={project.id}>
              <ProjectSummary project={project}/>
          </div>
        )
      })}
    </div>
  )
}

export default ProjectList

项目摘要：

const ProjectSummary = ({ project }) => {
    return(
      <div className="card z-depth-0 project-summary show-up post">

        <div className="name">
          <div className="">
            <span className="btn btn-floating z-depth-0 black user-indicator">
              {project.authorFirstName && project.authorFirstName[0]}{project.authorSecondName && project.authorSecondName[0]}
            </span>
             <span> {project.authorFirstName {project.authorSecondName} </span>
             <span className="right options"> <i className="material-icons">more_vert</i> </span>
          </div>
        </div>

        <div className="card-image">
          <img src={project.imageUrl} alt="art" />
          <PostCredits />
        </div>

        <div className="card-reveal">
          <Comments id={project.id} />
        </div>

        <div className="card-content">
          <Link to={'/projectdetails/' + project.id} className="black-text">
            <p className="post-title"> {project.title} </p>
          </Link>
          <p className="grey-text lighten-3 load-comments activator"> Load comments </p>
          <p className="grey-text date-format">
            {project.createdAt && project.createdAt
              .toDate()
              .toLocaleDateString('indian', {
                year: "numeric", month: "short", day: "numeric"
            })}
          </p>
        </div>
        <div className="add-comment">
          <AddComment projectId={project.id} />
        </div>

      </div>
    )
}

export default ProjectSummary

const Comment = (props) => {
    return(
      <div>
        <div className="loaded-comments">
          <span className="card-title grey-text text-darken-4"> Comments <i className="material-icons right">close</i> </span>
          <p> <span className="commentor"> Joe </span>  </p>
        </div>
      </div>
    )
}

const mapStateToProps = (state, ownProps) => {
  console.log("state: ", state)
  return {

  }
}

export default compose (
  connect(mapStateToProps),
  firestoreConnect(props => {
    return [
      { collection: 'projects',
        doc: props.id,
        subcollections: [
          {
            collection: 'comments'
          }
        ]
      }
    ]
  })
)(Comment)

预期结果：

*想要加载 Project 集合的名为 Comments

的子集合

实际结果：

*没有错误发生，但仍未加载任何数据。

谢谢！

Answer 1

有可能您只是看不到该子集合。如果您在浏览器控制台中查看，请导航至firebase>有序> prjoects>注释。您应该可以看到一系列的评论

示例：

|-firestore
|--ordered:
|---projects: Array(1)
|----0:
|-----id: *uid*
|------comments: Array(2)
|-------0: {*comment details*}
|-------1: {*comment details*}
|------length: 2
|-----__proto__: Array(0)

在您可以根据密钥映射数据之后。

const mapStateToProps = (state) => {
  return {
    projects: state.firestore.ordered.projects.comments,
  }
}

连接后，您将可以使用您的数据。

如何将Firestore子集合加载到Redux Store？