Vue框架下Firestore用户名与文本框输入字符串比较失败问题求解

核心原因 #

字符串判断不生效通常由以下几个常见问题导致：

• 首尾隐形空格：用户输入的文本、Firestore存储的用户名可能存在首尾空格，直接进行全等判断会判定为不相等
• 大小写差异：输入内容和数据库存储内容的大小写不一致时，全等判断无法识别为相同字符串
• 冗余代码干扰：原方法中定义了未在data中声明的变量curruser = this.username，虽然不会直接打断判断逻辑，但可能产生隐式报错干扰调试

修复后的代码 #

直接修改followlist方法即可： #

followlist: function(e) {
  // 提前统一处理输入的用户名
  const inputName = this.usernames.trim().toLowerCase()
  db.collection('users').get().then((querySnapshot) =>{
    this.loading = false
    querySnapshot.forEach((doc) => {
      // 统一处理数据库取出的用户名
      const dbName = doc.data().username.trim().toLowerCase()
      if(inputName === dbName){
        console.log('匹配成功', doc.data().username)
        // 此处可添加匹配成功后的后续逻辑，比如存储匹配用户信息到data中用于页面渲染
      }else{
        console.log('不匹配')
      }
    })
  })
}

优化建议 #

你当前在created生命周期中已经拉取过全量用户列表，可直接在拉取时将username也存入users数组中，后续搜索不需要重复请求Firestore，减少数据库请求开销：

1. 修改created中用户数据组装逻辑：

const data = {
  'id': doc.id,
  'name': doc.data().name,
  'dept': doc.data().dept,
  'username': doc.data().username
}

2. 优化followlist为本地数组遍历：

followlist: function(e) {
  const inputName = this.usernames.trim().toLowerCase()
  const matchedUser = this.users.find(item => item.username.trim().toLowerCase() === inputName)
  if(matchedUser){
    console.log('匹配成功', matchedUser.username)
  }else{
    console.log('无匹配用户')
  }
}

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