如何在react web应用程序中显示firestore中的数据

npm install firebase

import firebase from 'firebase/app';
import 'firebase/firestore';

const firebaseConfig = {
  // 将Firebase配置信息填入这里
};

firebase.initializeApp(firebaseConfig);

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

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

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

    fetchData();
  }, []);

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

export default FirestoreData;

import React from 'react';
import FirestoreData from './FirestoreData';

const App = () => {
  return (
    <div>
      <h1>Firestore Data</h1>
      <FirestoreData />
    </div>
  );
};

export default App;