Nuxt中createUserWithEmailAndPassword成功后Firestore写文档无报错失败

核心问题点 #

• setDoc是异步API，现有代码未加await执行，外层的同步try/catch无法捕获异步抛出的异常，因此看不到报错信息
• 不需要额外调用onAuthStateChanged监听登录状态，createUserWithEmailAndPassword执行成功后会直接返回用户凭证，可直接获取uid
• 重复注册onAuthStateChanged监听器会导致后续多次触发异常逻辑

修复后的代码 #

<template>
    <v-form @submit.prevent="createUser">
        <v-text-field
            v-model="register.email"
            label="邮箱"
            required
        />
        <v-text-field
            v-model="register.password"
            label="密码"
            required
        />
        <v-text-field
            v-model="register.street"
            required
            label="街道地址"
        />
        <v-btn
            type="submit"
        >
            注册
        </v-btn>
    </v-form>
</template>

<script>
import Vue from 'vue'
import { createUserWithEmailAndPassword } from 'firebase/auth'
import { doc, setDoc } from 'firebase/firestore'
import { auth, db } from '~/plugins/firebase.js'

export default Vue.extend({
  data () {
    return {
      register: {
        email: '',
        password: '',
        street: ''
      }
    }
  },
  
  methods: {
    async createUser () {
      try {
        // 注册成功直接获取用户对象
        const userCredential = await createUserWithEmailAndPassword(
          auth,
          this.register.email,
          this.register.password
        )
        const user = userCredential.user
        // 异步方法加await，异常可被外层catch捕获
        const ref = doc(db, 'profile', user.uid)
        await setDoc(ref, {
          street: this.register.street
        })
      } catch (error) {
        console.log(error.code)
        console.log(error.message)
        alert('操作失败：' + error.message)
      }
    }
  }
})
</script>

额外优化说明 #

• data中提前声明register下的所有字段，符合Vue2响应式数据要求，避免出现字段更新不触发视图更新的问题
• 统一用一个try/catch捕获全流程的异常，避免零散的错误处理逻辑遗漏问题

内容的提问来源于stack exchange，提问作者M.Pribadi