Vue3 集成 Firebase 9 身份验证时表单提交失效及报错问题咨询

核心问题原因 #

• 事件绑定名称拼写错误：表单@submit绑定的方法名是registr，但实际定义的方法名是register，少了末尾的字母e。Vue解析模板时找不到对应方法，会触发隐式运行时错误，直接中断提交逻辑，所以方法内的console.log完全不会执行。
• Firebase 9 模块化API使用错误：这是控制台报default is undefined错误的核心原因：
  1. Firebase 9 采用纯模块化API，没有旧版本的全局默认导出，项目中残留的import firebase from 'firebase/app'类旧写法会直接触发默认导出未定义的报错
  2. createUserWithEmailAndPassword方法要求第一个参数传入Auth实例，现有代码直接传邮箱密码，参数不匹配
  3. Firebase初始化后仅导出了App实例，没有初始化并导出Auth实例，全局导入import "firebase/auth"在模块化API下无效

修复步骤 #

1. 修正表单事件绑定拼写
   将表单标签的绑定逻辑改为：

<form @submit.prevent="register">

2. 修正Firebase初始化文件配置
   修改你的Firebase初始化代码，新增Auth实例导出：

import { initializeApp } from 'firebase/app';
// 导入Auth初始化方法
import { getAuth } from "firebase/auth";
const firebaseConfig = {
  apiKey: "#################################",
  authDomain: "decbase-#####.firebaseapp.com",
  projectId: "decbase-#####",
  storageBucket: "decbase-#####.appspot.com",
  messagingSenderId: "############",
  appId: "1:0000000000:web:aaaaaaaaaaaaaaaaaaaaaa"
};
const firebaseApp = initializeApp(firebaseConfig);
// 初始化Auth实例并导出
export const auth = getAuth(firebaseApp);
export default firebaseApp;

3. 修正组件内Firebase调用逻辑
   删除组件内无效的import "firebase/auth"代码，导入Auth实例并调整方法传参：

import 'animate.css';
// 替换为你实际的Firebase初始化文件路径
import { auth } from './firebase初始化文件路径';
import { createUserWithEmailAndPassword } from "firebase/auth";

// ...组件其余代码
methods: {
  register(){
    console.log('WORK');
    // 首个参数传入Auth实例
    createUserWithEmailAndPassword(auth, this.email, this.password)
            .then(() => {
              console.log('success')
            })
            .catch(err => {
              console.error(err)
            })
  }
}

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