ReactJS读取Firebase实时数据库数据渲染表格报错求助

问题核心 #

你用React请求Firebase实时数据库时，返回的是键值对对象（而非数组），但沿用了处理数组的map方法导致报错；同时错误地对React元素执行JSON.parse——Axios已经自动完成了JSON响应的解析，这一步完全多余。

解决步骤 #

1. 转换Firebase对象为数组 #

Firebase实时数据库的列表数据默认以对象形式返回（键为节点ID），可以用JS内置方法快速转成数组：

• 仅提取数据值：用Object.values()直接拿到数据对象组成的数组

  const dataArray = Object.values(data);
  

• 保留节点ID（用于后续操作）：用Object.entries()获取键值对，再把节点ID整合进数据对象

  const dataArray = Object.entries(data).map(([key, item]) => ({
    ...item,
    firebaseKey: key // 将节点ID添加到数据中
  }));
  

2. 修正React代码错误 #

你的代码存在两个关键问题：初始useState设为数组（和Firebase返回格式不匹配）、对map返回的React元素执行JSON.parse（完全错误）。修改后的完整代码如下：

import Axios from "axios";
import "./App.css";
import React, { useEffect, useState } from "react";

function App() {
  // 初始值设为null，匹配Firebase返回的对象格式
  const [data, setData] = useState(null);

  useEffect(() => {
    Axios.get(
      "https://ojt-thesis-e37ae-default-rtdb.asia-southeast1.firebasedatabase.app/thesis-titles.json"
    )
      .then((res) => {
        console.log("Getting from ::::", res.data);
        setData(res.data);
      })
      .catch((err) => console.log(err));
  }, []);

  // 数据未加载完成时显示加载提示
  if (!data) {
    return <div>Loading...</div>;
  }
  // 转换对象为数组
  const dataArray = Object.values(data);

  return (
    <div className="App">
      <h1>Sample API App</h1>
      <table>
        <tr>
          <th>ID </th>
          <th>Title</th>
          <th>Category</th>
        </tr>
        {/* 用转换后的数组渲染表格行，添加唯一key属性 */}
        {dataArray.map((item) => (
          <tr key={item.id}>
            <td>{item.id}</td>
            <td>{item.title}</td>
            <td>{item.category}</td>
          </tr>
        ))}
      </table>
    </div>
  );
}

export default App;

3. 实用技巧 #

• 必须加key属性：React列表渲染要求每个元素有唯一key，避免渲染警告
• 加载/错误状态：添加加载提示、错误状态展示，提升用户体验
• 数据校验：如果Firebase返回的数据可能缺失字段，可以在渲染时做容错处理（比如item?.id）

内容的提问来源于stack exchange，提问作者Nionel Ibarra