React项目使用ApexChart从Firebase取数据返回undefined如何解决

问题原因 #

你的代码在Firebase数据还未加载完成时就直接读取snapshot对象，此时snapshot为undefined，即便用了可选链操作符?.，最终series.data也会被赋值为undefined，导致ApexCharts读取不到有效数据。

修复方案 #

1. 核心代码调整

import React, { useEffect, useState } from "react";
import Chart from "react-apexcharts";
import { auth, db } from "./firebase";
import { useCollection } from "react-firebase-hooks/firestore";

// 代码必须包裹在函数组件内，hooks不能直接在顶层作用域执行
const ChartComponent = () => {
  const [series, setSeries] = useState([]);
  const query = db.collection("data");
  const [snapshot, loading, error] = useCollection(query);

  useEffect(() => {
    // 优先判断加载、错误状态，确保snapshot有有效值再处理数据
    if (loading) return;
    if (error) {
      console.error("数据拉取错误：", error);
      return;
    }
    if (snapshot) {
      const chartData = snapshot.docs.map((doc) => doc.data().value);
      setSeries([
        {
          name: "Desktops",
          data: chartData,
        },
      ]);
    }
  // 把loading、error加入依赖项，触发状态变化时重新执行逻辑
  }, [snapshot, loading, error]);

  // 加载、错误状态兜底处理
  if (loading) return <div>数据加载中...</div>
  if (error) return <div>数据加载失败，请刷新重试</div>

  // 渲染图表，替换为你自己的图表配置即可
  return (
    <Chart
      options={/* 你的图表配置项 */}
      series={series}
      type="line"
      width="100%"
    />
  )
}

export default ChartComponent

2. 额外检查项

• 确认Firebase中data集合下的所有文档都存在value字段，不存在的字段会返回undefined
• 检查Firestore权限规则，确保你有权限读取data集合的数据，权限不足也会导致snapshot为空

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