在useEffect中，无法实时获取来自firestore的数据

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

const MyComponent = () => {
  const [data, setData] = useState([]);

  useEffect(() => {
    const fetchData = async () => {
      const firestore = firebase.firestore();
      const snapshot = await firestore.collection('yourCollection').get();
      const newData = snapshot.docs.map((doc) => doc.data());
      setData(newData);
    };

    fetchData();

    return () => {
      // 取消订阅
      // firestore.collection('yourCollection').onSnapshot(() => {});
    };
  }, []);

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

export default MyComponent;