MERN+Firebase项目报Maximum call stack size exceeded错误如何解决

1. 配置导入错误（直接触发栈溢出） #

你代码中的核心错误是将整个Firebase SDK模块当成了配置对象传入初始化方法：

// 错误写法
import firebaseKeys from 'firebase';
firebase.initializeApp(firebaseKeys);

你传入的firebaseKeys本质是完整的Firebase SDK对象，内部存在大量循环引用，初始化方法执行深拷贝时递归遍历直接触发Maximum call stack size exceeded和deepExtend相关报错。
修复步骤：

• 新建独立的Firebase配置文件，例如src/utils/firebaseConfig.js，填入你从Firebase控制台获取的项目配置：

// src/utils/firebaseConfig.js
import firebase from 'firebase/app';
import 'firebase/firestore';
import 'firebase/storage';

// 替换为你自己的Firebase项目配置
const firebaseConfig = {
  apiKey: "xxx",
  authDomain: "xxx",
  projectId: "xxx",
  storageBucket: "xxx",
  messagingSenderId: "xxx",
  appId: "xxx"
};

// 避免重复初始化
if (!firebase.apps.length) {
  firebase.initializeApp(firebaseConfig);
}

// 直接导出初始化完成的实例
export const firestore = firebase.firestore();
export const storage = firebase.storage();

2. 冗余代码清理 #

删除ProductScreen.js中以下冗余代码：

• 所有Firebase相关导入
• 错误的firebaseKeys导入
• 未使用的FireStoreStuff组件
• 注释掉的旧初始化代码
  仅保留从配置文件导入storage的语句：

// ProductScreen.js 顶部添加
import { storage } from '../utils/firebaseConfig';

3. 上传逻辑修复 #

你原有上传代码中存在语法错误，storage调用缺少括号，直接使用导入的实例修改即可：

async function uploadFile() {
  console.log('starting UPLOAD ========');
  const blob = await fetch(mediaBlobUrl).then((r) => r.blob());
  const path = '/recordings/one';
  await storage.ref(path).put(blob);
  const url = await storage.ref(path).getDownloadURL();
  setURL(url);
  console.log('Uploaded complete');
}

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