React中map遍历Firebase获取的数组仅遍历一次报错排查

API 探路者

2026-8-28

问题根因

你的报错和表格组件本身无关，是三个问题叠加导致的：

异步时序错误+响应式失效：Firebase的once("value")是异步请求，你在模块顶层定义dummy数组并直接导出时，Firebase请求还没返回，数组只有初始硬编码的1条数据。等请求返回执行push修改数组时，React根本感知不到普通变量的变化，不会触发重渲染。你在控制台能看到数组里有更多内容，是Chrome控制台对引用类型的懒打印特性：打印数组时不会立刻定格值，等你手动展开日志时异步操作已经完成，你看到的是最终值，但组件渲染时拿到的根本不是这个状态。
列表key写死：你在map遍历时给所有ClientTr写了固定的key={'key'}，当数组长度大于1时，所有列表项key完全重复，React虚拟DOM diff时会直接抛出渲染错误。
空值未兜底：Firebase对应路径下没有数据时，snapshot.val()会返回null，如果你直接把返回值push进数组，遍历到null项时访问data.name/data.remark等属性会直接抛出类型错误，表现就是map只执行1次（遍历第一条正常数据）就中断报错，哪怕你觉得数组里只有1条数据，也可能因为异步插入的异常值触发报错。

修复方案

不要在独立js文件里拉取数据导出普通可变数组，把数据逻辑收回到React组件内，用状态驱动视图更新：

用useState存储表格数据，初始值为空数组做兜底
用useEffect在组件挂载时拉取Firebase数据，拉取完成后先把Firebase返回的对象结构转成数组，做空值处理后再更新状态
列表遍历时用每条数据的唯一标识作为key，禁止写死固定值
加加载态和错误兜底，避免异步请求过程中渲染异常

修正后的完整组件代码：

import { useState, useEffect } from 'react';
// 替换成你项目里的实际导入路径
import { db } from './firebaseConfig';
import { ClientTable, ClientTr, ClientTh, ClientTd } from './your-table-components';
import { Wrapper, ProductWrapper, ImageWrapper, NumberBox } from './your-style-components';
import Product from './your-product-image-path';

export default function CartTable() {
  const [tableData, setTableData] = useState([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    const cartRef = db.ref("users/random/cart");
    
    cartRef.once("value")
      .then((snapshot) => {
        const rawData = snapshot.val();
        const formattedData = [];

        // Firebase返回的多节点数据默认是对象结构，转成数组并兜底空值
        if (rawData) {
          Object.entries(rawData).forEach(([nodeKey, item]) => {
            // 跳过异常的非对象子项
            if (typeof item === 'object' && item !== null) {
              formattedData.push({
                id: nodeKey, // 用Firebase自带的节点key作为唯一id
                ...item
              })
            }
          })
        }

        // 要加测试数据在这里加，保证结构一致
        formattedData.unshift({
          id: 'test-default',
          name: 'shoe',
          remark: 'remark',
          price: 'price',
          photo: 'photo',
          amount: '350'
        })

        setTableData(formattedData);
      })
      .catch(err => {
        console.error('购物车数据拉取失败:', err);
      })
      .finally(() => {
        setLoading(false);
        cartRef.off();
      })
  }, [])

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

  return (
    <ClientTable>
      <thead>
        <ClientTr>
          <ClientTh>Item Name</ClientTh>
          <ClientTh>Remark</ClientTh>
          <ClientTh>Price</ClientTh>
          <ClientTh>Quantity</ClientTh>
          <ClientTh>Amount</ClientTh>
          <ClientTh>Edit</ClientTh>
        </ClientTr>
      </thead>
      <tbody>
        {tableData.map((data) => {
          console.log('当前遍历项:', data);
          return (
            <ClientTr key={data.id}>
              <ClientTd>
                <Wrapper>
                  <ProductWrapper>
                    <ImageWrapper src={Product} alt="product" />
                  </ProductWrapper>
                  {data.name}
                </Wrapper>
              </ClientTd>
              <ClientTd>{data.remark}</ClientTd>
              <ClientTd>{data.price}</ClientTd>
              <ClientTd><NumberBox /></ClientTd>
              <ClientTd>{data.amount}</ClientTd>
              <ClientTd>Delete</ClientTd>
            </ClientTr>
          );
        })}
      </tbody>
    </ClientTable>
  )
}

避坑提醒

所有需要驱动视图更新的数据，必须存入React state/状态管理库，不要直接修改模块级普通变量，React不会追踪这类变量的变化，必然出现数据和视图不同步的问题。
调试异步逻辑时，不要直接控制台打印数组/对象判断值，浏览器的懒打印机制会误导你，要拿快照值可以用console.log(JSON.parse(JSON.stringify(目标值)))打印执行时刻的静态值。
列表渲染的key必须保证同层级唯一，不要写死固定值、不要用遍历索引当key（数据会动态增减时索引会变，会导致DOM状态错乱）。

内容的提问来源于stack exchange，提问作者like who