使用AntDesign列表和Firebase Firestore数据进行反应

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

const firebaseConfig = {
  // ...你的Firebase配置
};

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

const firestore = firebase.firestore();

function MyListComponent() {
  const [items, setItems] = useState([]);

  useEffect(() => {
    const unsubscribe = firestore.collection('items')
      .orderBy('createdAt')
      .limit(10)
      .onSnapshot((snapshot) => {
        const itemsData = snapshot.docs.map((doc) => ({
          id: doc.id,
          ...doc.data(),
        }));
        setItems(itemsData);
      });

    return () => unsubscribe();
  }, []);

  return (
    <List
      grid={{ gutter: 16, column: 4 }}
      dataSource={items}
      renderItem={(item) => (
        <List.Item>
          <Card title={item.title}>
            <p>{item.description}</p>
          </Card>
        </List.Item>
      )}
    />
  );
}

export default MyListComponent;