Vue3+TypeScript组合式API中Firebase认证报错求助

问题翻译 #

• TypeScript类型错误：Property 'email' does not exist on type '{ setup(): { email: Ref; password: Ref; gender: Ref; registerUser: () => void; }; methods: {}; }'（email和password均触发该错误）
• 浏览器运行时错误：TypeError: 无法读取未定义的属性'email'

错误原因 #

1. Vue3组合式API的setup函数不存在传统选项式API的this上下文，直接用this.email会导致this为undefined。
2. 模板中绑定响应式变量无需加this，Vue会自动识别setup返回的变量。
3. 在setup内部访问ref创建的响应式变量时，必须通过.value获取原始值。

修正后的完整代码 #

<template>
  <input placeholder="邮箱" v-model="email" />
  <input placeholder="密码" v-model="password" type="password" />
  <button @click="registerUser">提交注册</button>
</template>

<script lang="ts">
import { ref } from "vue";
import { useRouter } from "vue-router";
import { getAuth, createUserWithEmailAndPassword } from "firebase/auth";

export default {
  setup() {
    const router = useRouter();
    const email = ref("");
    const password = ref("");
    const gender = ref("Male");

    const registerUser = () => {
      // 通过.value访问ref变量的实际值
      createUserWithEmailAndPassword(getAuth(), email.value, password.value)
        .then(() => { 
          router.push("/");
        })
        .catch((error) => {
          console.error("注册失败：", error.message);
        });
    };

    return {
      email,
      password,
      gender,
      registerUser,
    };
  },
};
</script>

关键修正点 #

• 模板绑定：移除this.，改用v-model实现双向绑定（原@input赋值无法正确同步输入内容到响应式变量）。
• setup内部逻辑：调用Firebase注册方法时，使用email.value和password.value获取实际输入值，彻底删除this的使用。

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