React自定义钩子和Firestore快照

import React, { useState, useEffect } from 'react';
import { useFirestore } from 'reactfire';

// 自定义钩子，获取Firestore快照
const useFirestoreSnapshot = (collectionPath) => {
  const firestore = useFirestore();
  const [data, setData] = useState([]);

  useEffect(() => {
    const unsubscribe = firestore.collection(collectionPath)
      .onSnapshot((snapshot) => {
        const newData = snapshot.docs.map((doc) => doc.data());
        setData(newData);
      });

    return () => unsubscribe();
  }, [firestore, collectionPath]);

  return data;
};

// 使用自定义钩子获取Firestore快照并更新UI
const MyComponent = () => {
  const data = useFirestoreSnapshot('myCollection');

  return (
    <div>
      {data.map((item) => (
        <div key={item.id}>{item.name}</div>
      ))}
    </div>
  );
};