使用querySnapshot.size作为.doc id和firebase和reactjs

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

const BlogCount = () => {
  const [count, setCount] = useState(0);

  useEffect(() => {
    const fetchData = async () => {
      const db = firebase.firestore();
      const querySnapshot = await db.collection('posts').get();
      setCount(querySnapshot.size);
    };

    fetchData();
  }, []);

  return (
    <div>
      <h1>总文章数: {count}</h1>
    </div>
  );
};

export default BlogCount;

// 确保 Firestore 已正确初始化
if (!firebase.apps.length) {
  firebase.initializeApp({
    apiKey: "YOUR_API_KEY",
    authDomain: "YOUR_AUTH_DOMAIN",
    projectId: "YOUR_PROJECT_ID",
    storageBucket: "YOUR_STORAGE_BUCKET",
    messagingSenderId: "YOUR_MESSAGING_SENDER_ID",
    appId: "YOUR_APP_ID"
  });
}

useEffect(() => {
  const unsubscribe = db.collection('posts').onSnapshot(snapshot => {
    setCount(snapshot.size);
  });

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