使用React从firestore获取地图数据

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

firebase.initializeApp({
  // 在这里添加你的Firebase配置
});

const db = firebase.firestore();

class MapComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      mapData: []
    };
  }

  componentDidMount() {
    // 使用Firestore查询获取地图数据
    db.collection('maps').get()
      .then((querySnapshot) => {
        const mapData = [];
        querySnapshot.forEach((doc) => {
          // 处理每个文档的数据
          const data = doc.data();
          mapData.push(data);
        });
        // 更新组件状态
        this.setState({ mapData });
      })
      .catch((error) => {
        console.error('Error getting map data: ', error);
      });
  }

  render() {
    // 渲染地图数据
    return (
      <div>
        {this.state.mapData.map((data) => (
          <div key={data.id}>
            <h3>{data.name}</h3>
            <p>{data.description}</p>
          </div>
        ))}
      </div>
    );
  }
}