无法从反应图表中的firebase获取数据

Question

我在我的 react 项目中使用 ApexChartJs，但是当我尝试从我的 firebase 数据库中获取动态数据时，请显示 undefined。

这是我项目中的部分代码：

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


  const [dataPoint, setDataPoint] = useState([]);
  const query = db.collection("data");
  const [snapshot, loading, error] = useCollection(query);
  const [series, setSeries] = useState([]);

  useEffect(() => {
    setSeries([
      {
        name: "Desktops",
        data: snapshot?.docs.map((doc) => doc.data().value),
      },
    ]);
  }, [snapshot]);

  console.log(series);

firebase 中的数据如下所示：

firebase 配置文件：

import firebase from "firebase";

// For Firebase JS SDK v7.20.0 and later, measurementId is optional
const firebaseConfig = {
  apiKey: "AIzaSyC2mfjPdIdXxGgJFqqVviw32xoaEMxxxxxx",
  authDomain: "chart-app-4591b.firebaseapp.com",
  projectId: "chart-app-4591b",
  storageBucket: "chart-app-4591b.appspot.com",
  messagingSenderId: "995691438244",
  appId: "1:995691438244:web:6d945f72ff51d444664631",
  measurementId: "G-2B9ZFG6E33",
};

const app = firebase.initializeApp(firebaseConfig);

const db = app.firestore();
const provider = new firebase.auth.GoogleAuthProvider();
const auth = firebase.auth;

export { db, provider, auth };

Answer 1

如果您的 firebase 应用设置良好且配置正确，则可能导致 undefined 查询结果的主要问题是结果仍在加载中。

为了克服这个问题，您应该在loading 属性更改时更新您的series 状态（连同查询结果snapshot 更改）：

  const query = db.collection("data");
  const [snapshot, loading, error] = useCollection(query);

  useEffect(() => {
    setSeries([
      {
        name: "Desktops",
        data: snapshot?.docs.map((doc) => doc.data().value),
      },
    ]);
  }, [loading, snapshot]);

您还应该为状态更新提供替代的error 处理方式。

更新（根据权限错误）

一个常见的错误来源是缺少从配置的 Firestore DB 读取和写入的权限，该错误消息突出显示：

FirebaseError: Missing or insufficient permissions

要允许所有读取和写入仅用于测试模式（生产系统绝不应如此），您可以为数据库设置以下安全规则：

// Allow read/write access to all users under any conditions
service cloud.firestore {
  match /databases/{database}/documents {
    match /{document=**} {
      allow read, write: if true;
    }
  }
}

您可以在Cloud Firestore Security Rules in the official documentation 上阅读更多内容。