JS报错Cannot find name 'data'但已定义变量如何解决

这个错误是块级作用域访问限制导致的：

• 用const/let声明的变量，仅能在声明它所在的最近一层大括号{}（即代码块）内部访问，外部作用域无法读取到块内声明的变量
• 你代码里两次声明data的位置，分别在try块和catch块的内部，两个data都属于块内局部变量，出了对应的大括号就会被销毁
• 后续写if (!data)判断的位置在try/catch结构的外层，这个作用域里根本没有声明过data变量，因此TS/JS引擎会抛出"Cannot find name 'data'"的错误。

把data的声明提升到try/catch结构的外层，让两个分支和后续判断逻辑都能访问到同一个变量即可。

注意：原有逻辑存在一个隐含bug：window.localStorage.getItem的返回值永远是字符串类型或null，如果你存储的是对象结构的鉴权数据，必须通过JSON.parse转成JS对象才能正常使用，解析抛出的异常刚好可以被原有catch逻辑捕获。如果你存储的本身就是可直接使用的原始值，去掉解析逻辑即可。

修改后可正常运行的代码：

const initialState = () => {
  // 在外层作用域声明变量，覆盖后续所有逻辑的访问范围
  let data = null;
  try {
    const storageStr = window.localStorage.getItem('auth');
    // 有存储值时解析为对象，无值直接赋值null
    data = storageStr ? JSON.parse(storageStr) : null;
  } catch (e) {
    // 读存储失败、JSON解析失败时，data保持null值即可
    data = null;
  }

  if (!data) {
    return {
      matrixIsAuthenticated: false,
      matrixUserId: null,
      matrixAccessToken: null,
    };
  }
  return data;
};

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