读取嵌套数据时 Firebase 实时数据库“超出最大调用堆栈大小”错误 (Next.js)答案

【问题标题】：Firebase Realtime Database 'Maximum call stack size exceeded' error when reading nested data (Next.js)读取嵌套数据时 Firebase 实时数据库“超出最大调用堆栈大小”错误 (Next.js)
【发布时间】：2022-10-24 20:20:56
【问题描述】：

当我从 Firebase 实时数据库中读取一些嵌套数据时，出现了以下错误。

Uncaught RangeError: Maximum call stack size exceeded

我的项目基于 Next.js 和 Typescript。所以，为了澄清这个问题，我在create-next-app 创建的一个新项目上进行了如下测试。

npx create-next-app@latest --typescript
cd {project folder path}
npm install firebase

我在_app.tsx 中编写了以下代码。（注意useEffect() 部分。）

import "../styles/globals.css";
import type { AppProps } from "next/app";
import { useEffect } from "react";
import { initializeApp } from "firebase/app";
import { getDatabase, onValue, ref } from "firebase/database";

function MyApp({ Component, pageProps }: AppProps) {
  useEffect(() => {
    const firebaseConfig = {
      ...
    };
    const app = initializeApp(firebaseConfig);
    const db = getDatabase(app);

    onValue(ref(db, "ABC"), (snapshots) => console.log(snapshots.val()));
  }, []);

  return <Component {...pageProps} />;
}

export default MyApp;

数据库状态如下。

当我在本地（npm run dev）中运行此代码时，输出正确为{DEF: 123}。

但是当我在生产中运行这段代码时（npm run build 和npm run start），输出是null，并且在控制台上出现了上述错误。

为什么会出现这个问题？供您参考，我确认了这样一个事实，即如果数据没有嵌套，则不会引发错误，并且在本地和生产中都会返回正确的数据。（例如，如果数据结构是{ABC: 123}，则输出是123，而不是null。）

【问题讨论】：

标签： node.js firebase-realtime-database

【解决方案1】：

我是这篇文章的作者。

我通过将 Next.js 版本从 12.3.1 降级到 12.3.0 解决了这个问题。

【讨论】：