如何在React-redux项目中使用firestoreConnect获取子集合-云Firebase

npm install firebase react-redux-firebase

import firebase from 'firebase/app';
import 'firebase/firestore';

const firebaseConfig = {
  apiKey: 'YOUR_API_KEY',
  authDomain: 'YOUR_AUTH_DOMAIN',
  projectId: 'YOUR_PROJECT_ID',
  // 其他配置信息...
};

firebase.initializeApp(firebaseConfig);

export default firebase;

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

const YourComponent = ({ posts }) => {
  // 在这里使用获取到的子集合数据
  return (
    <div>
      {posts && posts.map(post => (
        <div key={post.id}>{post.title}</div>
      ))}
    </div>
  );
};

const mapStateToProps = state => {
  // 指定要获取的子集合路径
  const collectionPath = 'users';
  const subcollectionName = 'posts';

  // 使用firestoreConnect来获取子集合数据
  return {
    posts: state.firestore.ordered[collectionPath]?.[0]?.[subcollectionName]
  };
};

export default compose(
  connect(mapStateToProps),
  firestoreConnect(props => {
    // 指定要获取的子集合路径
    const collectionPath = 'users';
    const subcollectionName = 'posts';

    // 构建查询
    return [
      {
        collection: collectionPath,
        doc: props.userId,
        subcollections: [{ collection: subcollectionName }],
        storeAs: `${collectionPath}-${props.userId}-${subcollectionName}`
      }
    ];
  })
)(YourComponent);