如何将Firestore数据填充到React MUI卡片视图中？

1. 前期准备：配置Firebase #

• 安装Firebase依赖：

  npm install firebase
  # 或使用yarn
  yarn add firebase
  

• 创建Firebase配置文件（例如src/firebase.js），填入你的项目配置信息：

  import { initializeApp } from "firebase/app";
  import { getFirestore } from "firebase/firestore";
  
  const firebaseConfig = {
    apiKey: "你的API密钥",
    authDomain: "你的Auth域名",
    projectId: "你的项目ID",
    storageBucket: "你的存储桶地址",
    messagingSenderId: "你的消息发送者ID",
    appId: "你的App ID"
  };
  
  const app = initializeApp(firebaseConfig);
  export const db = getFirestore(app);
  

2. 获取Firestore数据并渲染卡片 #

假设你的Firestore集合名为animals，每个文档包含title、description、imageUrl、altText字段，对应卡片的标题、描述、图片地址和替代文本。使用React钩子获取数据并渲染：

import { useState, useEffect } from 'react';
import { collection, getDocs } from 'firebase/firestore';
import { db } from './firebase';
import Card from '@mui/material/Card';
import CardActionArea from '@mui/material/CardActionArea';
import CardMedia from '@mui/material/CardMedia';
import CardContent from '@mui/material/CardContent';
import Typography from '@mui/material/Typography';

export default function FirestoreCards() {
  const [items, setItems] = useState([]);
  const [isLoading, setIsLoading] = useState(true);

  // 异步获取Firestore数据
  useEffect(() => {
    const fetchItems = async () => {
      try {
        const querySnapshot = await getDocs(collection(db, 'animals'));
        const fetchedItems = querySnapshot.docs.map(doc => ({
          id: doc.id,
          ...doc.data()
        }));
        setItems(fetchedItems);
      } catch (err) {
        console.error('数据获取失败:', err);
      } finally {
        setIsLoading(false);
      }
    };

    fetchItems();
  }, []);

  if (isLoading) {
    return <Typography variant="body1">加载中...</Typography>;
  }

  // 渲染卡片列表
  return (
    <div style={{ display: 'flex', gap: '1.5rem', flexWrap: 'wrap', padding: '1rem' }}>
      {items.map(item => (
        <Card key={item.id} sx={{ maxWidth: 345 }}>
          <CardActionArea>
            <CardMedia
              component="img"
              height="140"
              image={item.imageUrl}
              alt={item.altText}
            />
            <CardContent>
              <Typography gutterBottom variant="h5" component="div">
                {item.title}
              </Typography>
              <Typography variant="body2" color="text.secondary">
                {item.description}
              </Typography>
            </CardContent>
          </CardActionArea>
        </Card>
      ))}
    </div>
  );
}

3. 补充说明 #

• 若仅需渲染单个文档，将getDocs替换为getDoc，并指定文档ID：

  import { doc, getDoc } from 'firebase/firestore';
  // ...
  const docSnap = await getDoc(doc(db, 'animals', '目标文档ID'));
  const singleItem = docSnap.data();
  

• 开发阶段可临时设置Firestore安全规则允许读取：allow read, write: if true;，生产环境需配置严格的权限规则。
• 卡片布局、样式可通过MUI的sx属性或自定义CSS调整。

内容的提问来源于stack exchange，提问作者Dev Tiwari