Firebase v9集成时出现Auth is undefined报错如何解决

Auth is undefined报错由两个问题直接导致：

• 你使用的9.8.3版本属于Firebase JS SDK v9大版本，该版本默认采用模块化函数式API，完全移除了旧版教程里firebase.auth()、firebase.firestore()这类命名空间链式调用的写法，旧写法在v9非兼容模式下根本无法生成有效的auth实例
• 你把Firebase初始化代码写在HTML内联的module脚本块中，初始化生成的变量只在当前脚本块的作用域内生效，外部引入的auth.js脚本没有权限访问这个内部的auth变量，自然会报未定义

1. 调整初始化逻辑 #

不要把Firebase初始化代码写在内联脚本块里，单独新建一个firebase-init.js文件存放初始化逻辑，方便其他脚本复用实例，代码如下：

// 导入核心初始化方法
import { initializeApp } from "firebase/app";
// 导入auth、firestore模块对应的初始化方法
import { getAuth } from "firebase/auth";
import { getFirestore } from "firebase/firestore";

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

// 初始化核心应用实例
const app = initializeApp(firebaseConfig);
// 生成auth实例，完全替换旧版const auth = firebase.auth()写法
const auth = getAuth(app);
// 生成firestore实例，完全替换旧版const db = firebase.firestore()写法
const db = getFirestore(app);

// 导出实例供其他脚本调用
export { auth, db };

注意：所有引入Firebase相关模块、使用import/export语法的脚本，在HTML中引入时必须添加type="module"属性，否则会直接报语法错误

2. 修正auth.js中的注册逻辑 #

v9版本的所有功能方法都需要单独导入，不再支持实例链式调用，在auth.js中按如下方式编写逻辑：

// 导入你初始化好的auth实例
import { auth } from './firebase-init.js';
// 单独导入邮箱密码注册方法
import { createUserWithEmailAndPassword } from "firebase/auth";

// 绑定注册表单提交事件（替换成你自己的表单选择器）
const registerForm = document.querySelector('#register-form');
registerForm.addEventListener('submit', (e) => {
  e.preventDefault();
  const email = registerForm.email.value.trim();
  const password = registerForm.password.value.trim();

  // 调用注册方法，注意第一个参数必须传入提前初始化好的auth实例
  createUserWithEmailAndPassword(auth, email, password)
    .then(userCred => {
      // 注册成功后的逻辑，比如跳转首页、提示成功
      console.log('注册成功，用户信息：', userCred.user);
    })
    .catch(err => {
      // 错误处理，比如提示邮箱已注册、密码不符合规则
      console.log('注册失败：', err.message);
    });
});

可选兼容方案 #

如果你想完全跟着旧教程的写法走不想改代码，可以引入v9版本的compat兼容包，兼容包支持旧版的所有命名空间写法，但缺点是会大幅增加前端包体积，不推荐正式项目使用。

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