React TypeScript中相同字符串比较返回false问题排查

问题分析 #

从你的控制台输出看，两个字符串类型都是string，视觉内容一致但===返回false，大概率是存在肉眼不可见的特殊字符或者前后空白字符，比如：

• 字符串前后的空格、换行符、制表符
• 零宽空格（U+200B）、字节顺序标记（U+FEFF）这类Unicode不可见字符
• Firestore存储时意外引入的隐式格式字符

排查步骤 #

先在代码中添加以下测试代码，定位具体问题：

const fetchUserName = async (userid: string) => {
  try {
    const userdb = collection(firestore, "users");
    const querySnapshot = await getDocs(userdb);
    const userDoc = querySnapshot.docs[1].data().uID;
    console.log(userDoc, userid);
    console.log(userDoc === userid);
    console.log(typeof userDoc, typeof userid);
    
    // 新增排查代码
    console.log("字符串长度对比:", userDoc.length, userid.length);
    console.log("trim后对比结果:", userDoc.trim() === userid.trim());
    console.log("userDoc字符编码:", [...userDoc].map(c => c.charCodeAt(0)));
    console.log("userid字符编码:", [...userid].map(c => c.charCodeAt(0)));
    
    return userDoc;
  } catch (error) {
    console.error("Error fetching user name:", error);
  }
};

• 如果长度不一致：说明其中一个字符串包含额外字符
• 如果trim后对比为true：说明存在前后空白字符
• 对比字符编码数组：能直接看到哪个字符的编码不一致，定位特殊字符

解决方案 #

1. 处理前后空白字符
   如果是前后空格/换行导致的问题，直接用trim()去除后再比较：

if (userDoc.trim() === userid.trim()) {
  // 匹配逻辑
}

2. 去除不可见特殊字符
   如果是存在零宽字符等非打印字符，用正则过滤后再比较：

const cleanString = (str: string) => str.replace(/[\x00-\x1F\x7F-\x9F\u200B\uFEFF]/g, '');
if (cleanString(userDoc) === cleanString(userid)) {
  // 匹配逻辑
}

3. 优化Firestore查询逻辑
   你当前的代码直接取docs[1]（第二个文档），很可能取错了目标用户。建议直接用where条件过滤查询，既高效又准确：

const fetchUserName = async (userid: string) => {
  try {
    const userdb = collection(firestore, "users");
    // 直接根据uID过滤查询
    const userQuery = query(userdb, where("uID", "==", userid));
    const querySnapshot = await getDocs(userQuery);
    
    if (!querySnapshot.empty) {
      const userData = querySnapshot.docs[0].data();
      console.log("匹配到用户:", userData);
      return userData.uID;
    } else {
      console.log("未找到对应用户");
      return null;
    }
  } catch (error) {
    console.error("Error fetching user name:", error);
  }
};

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