如何将Firebase集合数据提取为数组供React项目使用

算力阿峰

2026-9-28

Firebase集合指定字段提取并在React中使用的实现方案

核心逻辑说明

Firestore的get()是异步操作，你原代码中retrievegear变量实际是Promise实例，不是查询返回的结果数组，异步结果只能在回调中获取，必须存入React state才能在render的return语句中访问
提取部分字段时直接通过doc.data().对应字段名取值，用map遍历快照直接生成目标数组即可，无需额外循环

完整实现代码

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

function GearCheckboxGroup() {
  // 存储提取后的字段数组，render阶段可直接访问
  const [gearList, setGearList] = useState([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    const fetchGear = async () => {
      try {
        const querySnapshot = await firebase.firestore().collection('gear').get();
        // 按需提取字段，示例保留文档id、Name、Type三个字段，不需要的字段直接删除即可
        const extractedGear = querySnapshot.docs.map(doc => ({
          id: doc.id, // 可选：存文档id方便后续关联操作
          name: doc.data().Name,
          type: doc.data().Type
        }));
        setGearList(extractedGear);
      } catch (err) {
        console.error('获取gear集合失败：', err);
      } finally {
        setLoading(false);
      }
    };

    fetchGear();
  }, []); // 空依赖保证组件挂载时仅执行一次查询

  if (loading) return <div>加载中...</div>;

  // 直接用gearList渲染复选框
  return (
    <div className="gear-checkbox-group">
      {gearList.map(item => (
        <label key={item.id} style={{ display: 'block', margin: '8px 0' }}>
          <input type="checkbox" value={item.name} />
          {item.name}（{item.type}）
        </label>
      ))}
    </div>
  );
}

export default GearCheckboxGroup;