React对接Firestore后登录功能无法判断用户不存在问题

你的核心问题在于当没有匹配的用户文档时，querySnapshot.forEach()根本不会执行，所以你没有机会处理“用户不存在/密码错误”的分支。

问题分析 #

你的查询同时过滤了username和password，如果用户不存在或者密码不匹配，querySnapshot里的文档列表是空的，forEach循环不会触发，自然不会进入任何判断逻辑。你之前的代码只处理了“找到匹配文档”的情况，完全没覆盖无匹配的场景。

修改后的代码 #

const logCustomer = async (e) => {
  e.preventDefault();

  const q = query(collection(db, "customers"), where("username", "==", username), where("password", "==", password));
  const querySnapshot = await getDocs(q);
  
  // 先判断是否有匹配的文档
  if (querySnapshot.empty) {
    console.log('用户不存在或密码错误');
    // 这里可以添加提示用户的逻辑，比如setError('账号或密码错误')
    return;
  }

  // 有匹配文档，说明用户名密码正确
  querySnapshot.forEach((doc) => {
    console.log(doc.id, " => ", doc.data());
    console.log('用户登录成功！');
    // 这里添加登录后的逻辑，比如跳转首页、存储用户信息到state/localStorage
  });
}

额外提醒 #

不要明文存储密码，这是严重的安全问题。建议注册时使用bcrypt等库对密码进行哈希处理，登录时将用户输入的密码哈希后再和数据库里的哈希值比对，而不是直接存明文密码。

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