React导入Firebase Auth报错'firebase' is not defined求助

报错'firebase' is not defined的核心原因有两个：

1. Register.js中错误使用未导入的firebase对象：你导入了auth实例，但代码里却调用firebase.auth()，而firebase对象从未被导入或定义。
2. firebase.js代码混合两种API风格：同时使用Firebase v9+的模块化API和旧版命名空间API，且旧代码中firebase对象未定义，属于无效代码。

步骤1：修正firebase.js文件 #

删除冗余的旧版命名空间代码，统一使用Firebase v9+的模块化规范：

import { initializeApp } from 'firebase/app';
import { getAuth } from 'firebase/auth';
import { getFirestore } from 'firebase/firestore';
import { getStorage } from 'firebase/storage';

const firebaseConfig = {
  // 填入你的项目配置
};

const app = initializeApp(firebaseConfig);
const auth = getAuth(app);
const db = getFirestore(app);
const storage = getStorage(app);

export { auth, db, storage };

步骤2：修正Register.js文件 #

• 导入createUserWithEmailAndPassword方法（Firebase v9+中认证方法需单独导入）
• 使用导入的auth实例配合该方法完成注册逻辑，不再使用未定义的firebase对象：

import React, { useState } from 'react';
import { auth } from '../firebase';
import { createUserWithEmailAndPassword } from 'firebase/auth'; // 新增导入

const Register = () => {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const [error, setError] = useState(null);

  const handleRegister = async (e) => {
    e.preventDefault();
    try {
      // 替换原错误调用方式
      await createUserWithEmailAndPassword(auth, email, password);
      setEmail('');
      setPassword('');
    } catch (error) {
      setError(error.message);
    }
  };

  return (
    <div>
      <h1>Register</h1>
      {error && <p>{error}</p>}
      <form onSubmit={handleRegister}>
        <input
          type="email"
          placeholder="Email"
          value={email}
          onChange={(e) => setEmail(e.target.value)}
        />
        <input
          type="password"
          placeholder="Password"
          value={password}
          onChange={(e) => setPassword(e.target.value)}
        />
        <button type="submit">Register</button>
      </form>
    </div>
  );
};

export default Register;

额外说明 #

Firebase v9+采用模块化架构，目的是减少打包体积。所有认证相关方法（如signInWithEmailAndPassword、signOut等）都需要从firebase/auth单独导入，而不是通过firebase.auth()这种旧版命名空间方式调用。

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