使用React检索文档数据Firestore

基础概念

Firestore 是 Google Firebase 提供的一种 NoSQL 数据库，用于存储和同步数据。它适用于 Web、移动和服务器端应用。React 是一个用于构建用户界面的 JavaScript 库。

类型

Firestore 数据结构主要分为两种类型：

集合（Collections）：类似于关系数据库中的表，用于存储文档。
文档（Documents）：类似于关系数据库中的行，包含键值对数据。

应用场景

适用于需要实时数据同步的应用，如聊天应用、实时协作工具、游戏等。

示例代码

以下是一个使用 React 和 Firestore 检索文档数据的示例：

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

// 初始化 Firebase
const firebaseConfig = {
  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"
};

if (!firebase.apps.length) {
  firebase.initializeApp(firebaseConfig);
}

const db = firebase.firestore();

function App() {
  const [data, setData] = useState([]);

  useEffect(() => {
    const fetchData = async () => {
      try {
        const snapshot = await db.collection('yourCollection').get();
        const data = snapshot.docs.map(doc => ({ id: doc.id, ...doc.data() }));
        setData(data);
      } catch (error) {
        console.error('Error fetching data: ', error);
      }
    };

    fetchData();
  }, []);

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

export default App;