JavaScript已声明username仍报Uncaught ReferenceError未定义错误如何解决？

错误产生原因 #

• 核心问题是变量作用域不匹配：你使用const在onAuthStateChanged的回调函数的if(user)代码块内定义的username属于块级作用域变量，仅在该代码块内部可访问，外部的fetchChat事件监听逻辑完全无法读取该变量，因此触发未定义报错。
• 额外隐藏问题：Firebase的auth状态监听是异步执行的，即使你把变量定义到外层，如果没有控制逻辑执行顺序，也可能出现聊天监听逻辑先执行、auth还未返回用户信息的情况，同样会拿到无效值。

修复方案 #

方案1：调整作用域+控制执行顺序（推荐） #

将username提升到全局作用域声明，并且等auth验证通过、username赋值完成后，再初始化聊天监听逻辑，避免时序问题：

// 全局作用域声明变量
let username = null;

function authStateListener() {
  firebase.auth().onAuthStateChanged((user) => {
    if (user) {
      username = user.displayName;
      // 验证通过后再初始化聊天监听，保证username已赋值
      initChatListener();
    } else {
      window.location.href = "../pages/login.html";
    }
  });
};

// 将原有的聊天监听逻辑封装为函数
function initChatListener() {
  fetchChat.on("child_added", function (snapshot) {
    const messages = snapshot.val();

    const now = (new Date().toLocaleDateString()).split(".");
    const t = (messages.date).split(".");

    if( t[0] < now[0]) {
        const message = `<li class=${username === messages.username ? "sent" : "receive"}><span class="name">${messages.username} </span><br>${messages.message}<br><span class="time">${t[0] - now[0]} Days ago</span></li>`;
        addMsg(message);
    } else {
        const message = `<li class=${username === messages.username ? "sent" : "receive"}><span class="name">${messages.username} </span><br>${messages.message}<br><span class="time">${messages.time}</span></li>`;
        addMsg(message);
    }
  });
}

// 页面加载后优先执行auth状态监听
authStateListener();

方案2：实时读取当前登录用户（改动最小） #

如果不想维护全局变量，可以直接在聊天监听逻辑里实时从Firebase auth实例获取当前用户信息，无需单独存储username：

fetchChat.on("child_added", function (snapshot) {
  // 实时获取当前登录用户，避免作用域问题
  const currentUser = firebase.auth().currentUser;
  // 极端情况未登录直接拦截
  if (!currentUser) return;
  const username = currentUser.displayName;

  const messages = snapshot.val();
  // 后续原有逻辑保持不变
  const now = (new Date().toLocaleDateString()).split(".");
  const t = (messages.date).split(".");

  if( t[0] < now[0]) {
      const message = `<li class=${username === messages.username ? "sent" : "receive"}><span class="name">${messages.username} </span><br>${messages.message}<br><span class="time">${t[0] - now[0]} Days ago</span></li>`;
      addMsg(message);
  } else {
      const message = `<li class=${username === messages.username ? "sent" : "receive"}><span class="name">${messages.username} </span><br>${messages.message}<br><span class="time">${messages.time}</span></li>`;
      addMsg(message);
  }
});

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