firebase对象作为React子级无效，如果要呈现子级集合，请改用数组

import React, { useState, useEffect } from 'react';
import firebase from 'firebase';

// 初始化Firebase应用
firebase.initializeApp({
  // 配置你的Firebase应用信息
});

const App = () => {
  const [subCollection, setSubCollection] = useState([]);

  useEffect(() => {
    // 获取子级集合的引用
    const subCollectionRef = firebase.firestore().collection('subCollection');

    // 监听子级集合的变化
    const unsubscribe = subCollectionRef.onSnapshot((snapshot) => {
      const data = [];
      snapshot.forEach((doc) => {
        // 将子级数据转换为对象，并添加到数据数组中
        data.push({ id: doc.id, ...doc.data() });
      });
      // 更新组件的状态
      setSubCollection(data);
    });

    // 在组件卸载时，取消监听
    return () => unsubscribe();
  }, []);

  return (
    <div>
      {/* 遍历子级集合的数据，并渲染每个子级 */}
      {subCollection.map((item) => (
        <ChildComponent key={item.id} data={item} />
      ))}
    </div>
  );
};

const ChildComponent = ({ data }) => {
  return (
    <div>
      {/* 渲染子级数据 */}
      <p>{data.name}</p>
      <p>{data.description}</p>
    </div>
  );
};

export default App;