Vue.js登录组件Firebase验证时Email值为undefined的解决方法

你的代码存在几个关键问题导致Email值为undefined，以下是具体修复步骤：

1. 修复模板语法错误 #

模板中第二个<q-input>标签内错误插入了</template>，导致DOM结构断裂，v-model绑定完全失效。需要删除这个错误的闭合标签，并正确闭合<q-input>：

<!-- 错误代码 -->
<q-input           
  v-model="password"           
  </template>    
  </q-input>        

<!-- 修复后 -->
<q-input           
  v-model="password"
  type="password" <!-- 建议添加密码类型，隐藏输入内容 -->
></q-input>        

2. 移除冗余的选项式data定义 #

你同时在选项式data()和组合式setup()中定义了同名变量，导致作用域冲突——login函数实际调用的是setup()中未被模板绑定的局部变量，自然会是undefined。直接删除data()选项：

// 删掉这段冗余代码
data() {
  return {
    Email: '',
    password: '',
  };
},

3. 在setup中暴露响应式变量 #

setup()中定义的Email和password是局部变量，必须通过return暴露给模板，才能让v-model正确绑定到响应式变量上：

setup() {
  const Email = ref('');
  const password = ref('');

  // ... login函数代码

  return {
    Email, // 暴露给模板
    password, // 暴露给模板
    login
    // 删掉signup、onMainClick、hata这些未定义的无效变量
  };
}

4. 修正Firestore查询语法 #

query函数的第一个参数必须是集合引用，而非Firestore实例，需要先导入collection方法并修正写法：

// 先导入collection方法
import { collection } from 'firebase/firestore';

// 错误代码
const usersCollection = query(getFirestore(), 'users', where('uid', '==', user.uid));

// 修复后
const firestore = getFirestore();
const usersCollection = query(collection(firestore, 'users'), where('uid', '==', user.uid));

5. 可选：统一变量命名风格 #

建议将Email改为email，符合JavaScript小驼峰命名规范，避免与构造函数命名混淆：

<!-- 模板中修改 -->
<q-input v-model="email" label="邮箱"></q-input>

<!-- setup中修改 -->
const email = ref('');
// login函数中对应改为email.value
const userCredential = await signInWithEmailAndPassword(auth, email.value, password.value);

修复后的完整代码 #

<template>
<div class="q-pa-md" style="max-width: 500px; margin-left: 200px;" >    
   <q-form class="q-gutter-md">
     <q-input          
       v-model="email"
       label="邮箱"          
     ></q-input>    
     <q-input           
        v-model="password"
        label="密码"
        type="password"           
     ></q-input>        
     <div>
       <q-btn @click="login()" label="登录" type="button" color="red"></q-btn>
     </div>
   </q-form>    
 </div>
</template>

<script>
import { ref } from 'vue';
import { useMyStore } from 'src/stores/example-store';
import { getFirestore, collection, query, where, getDocs } from 'firebase/firestore';
import { auth } from 'src/boot/firebase';
import { getAuth, signInWithEmailAndPassword } from 'firebase/auth';

export default {
  setup() {
    const email = ref('');
    const password = ref('');

    const login = async () => {
      try {
        const authInstance = getAuth();
        const userCredential = await signInWithEmailAndPassword(authInstance, email.value, password.value);
        const user = userCredential.user;

        const firestore = getFirestore();
        const usersCollection = query(collection(firestore, 'users'), where('uid', '==', user.uid));
        const userSnapshot = await getDocs(usersCollection);

        if (userSnapshot.empty) {
          console.error('Login failed：用户不存在');
          return;
        }

        const userData = userSnapshot.docs[0].data();
        console.log('Login successful', userData);
      } catch (error) {
        console.error("Login failed：", error.message);
        console.log('当前输入的邮箱：', email.value);
      }
    };

    return {
      email,
      password,
      login
    };
  },
};
</script>

内容的提问来源于stack exchange，提问作者Ömer Gün