在React中使用Firebase Auth时遇到Uncaught TypeError: Class constructor Firebase cannot be invoked without 'new'错误的求助

首先来看你遇到的错误信息：

Uncaught TypeError: Class constructor Firebase cannot be invoked without 'new'
    at Recompose.esm.js:803:1
    at Module../src/components/globalPages/SignUp/index.js (index.js:113:1)
    at Module.options.factory (react refresh:6:1)
    at __webpack_require__ (bootstrap:24:1)
    at fn (hot module replacement:61:1)
    at Module../src/constants/routes.js (index.js:119:1)
    at Module.options.factory (react refresh:6:1)
    at __webpack_require__ (bootstrap:24:1)
    at fn (hot module replacement:61:1)
    at Module../src/components/App/index.js (bundle.js:15:75)

错误原因分析 #

从你提供的代码来看，核心问题有两个：

1. 代码结构混乱：你在index.js中同时导入了Firebase类，又在同一个文件里重新定义了Firebase类，这会导致命名冲突，浏览器实际调用的Firebase并不是你写的可实例化类。
2. Firebase类的导出/导入错误：你导入的Firebase可能来自./components/Firebase文件，但该文件并没有正确导出你需要的类，或者你误把类定义写在了错误的文件里。

具体解决步骤 #

1. 整理Firebase类的文件结构

创建src/components/Firebase.js文件，把Firebase类的定义移到这个文件中（同时要处理Firebase SDK的正确导入，这里分两种版本说明）：

如果你使用的是Firebase v9+（推荐的模块化版本）

// src/components/Firebase.js
import React from 'react';
import { initializeApp } from "firebase/app";
import { getAuth } from "firebase/auth";

// 替换成你自己的Firebase项目配置
const FirebaseConfig = {
  apiKey: "你的API_KEY",
  authDomain: "你的AUTH_DOMAIN",
  projectId: "你的PROJECT_ID",
  storageBucket: "你的STORAGE_BUCKET",
  messagingSenderId: "你的MESSAGING_SENDER_ID",
  appId: "你的APP_ID"
};

class Firebase {
  constructor() {
    this.app = initializeApp(FirebaseConfig);
    this.auth = getAuth(this.app);
  }

  createUserWithEmailAndPassword = (email, password) => 
    this.auth.createUserWithEmailAndPassword(email, password);
  
  signInWithEmailAndPassword = (email, password) => 
    this.auth.signInWithEmailAndPassword(email, password);
  
  signOut = () => this.auth.signOut();
  
  passwordReset = email => this.auth.sendPasswordResetEmail(email);
  
  passwordUpdate = password => this.auth.currentUser.updatePassword(password);
};

// 创建并导出Firebase上下文
export const FirebaseContext = React.createContext(null);
export default Firebase;

如果你使用的是Firebase v8及更早版本（旧命名空间方式）

// src/components/Firebase.js
import React from 'react';
import firebase from "firebase/app";
import "firebase/auth";

// 替换成你自己的Firebase项目配置
const FirebaseConfig = {
  // 你的配置内容
};

class Firebase {
  constructor() {
    firebase.initializeApp(FirebaseConfig);
    this.auth = firebase.auth();
  }

  // 保持你原来的方法定义
  createUserWithEmailAndPassword = (email, password) => firebase.auth().createUserWithEmailAndPassword(email, password);
  signInWithEmailAndPassword = (email, password) => firebase.auth().signInWithEmailAndPassword(email, password);
  signOut = () => firebase.auth().signOut();
  passwordReset = email => firebase.auth().sendPasswordResetEmail(email);
  passwordUpdate = password => firebase.auth().currentUser.updatePassword(password);
};

export const FirebaseContext = React.createContext(null);
export default Firebase;

2. 修正index.js的代码

删除index.js中重复定义的Firebase类，确保只导入正确的类和上下文：

// src/index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import reportWebVitals from './reportWebVitals';
import App from './components/App/index';
import Firebase, { FirebaseContext } from './components/Firebase';

ReactDOM.render(
  <React.StrictMode>
    <FirebaseContext.Provider value={new Firebase()}>
      <App />
    </FirebaseContext.Provider>
  </React.StrictMode>,
  document.getElementById('root')
);
reportWebVitals();

3. 确保正确安装Firebase依赖

如果还没安装或者版本不对，执行以下命令：

# 使用npm
npm install firebase

# 或者使用yarn
yarn add firebase

验证修复 #

完成上述步骤后，重新启动你的React项目，这个错误应该就会消失了。核心就是把Firebase类的定义和导入分开，确保你实例化的是正确的可实例化类，而不是冲突的导出对象。

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