REACT + FIRESTORE :监听react组件中firebase集合的更改，以自动更新react状态

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

// 初始化Firebase
const firebaseConfig = {
  // 配置信息
};

firebase.initializeApp(firebaseConfig);
const db = firebase.firestore();

const [data, setData] = useState([]);

useEffect(() => {
  const unsubscribe = db.collection('collectionName')
    .onSnapshot((snapshot) => {
      const updatedData = snapshot.docs.map((doc) => ({
        id: doc.id,
        ...doc.data(),
      }));
      setData(updatedData);
    });

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

return (
  <div>
    {data.map((item) => (
      <div key={item.id}>
        {/* 渲染数据 */}
      </div>
    ))}
  </div>
);