TypeScript中字符串转表达式执行访问数组报错如何解决

这个报错和「数组索引未被识别为数值类型」完全无关。JS/TS 中数组方括号访问时，传入字符串格式的数字（比如arr['1']）会自动转为数值索引，不会触发类型错误。
你看到的Cannot read properties of undefined (reading '1')，意思是你尝试访问索引1的那个宿主对象本身就是undefined，也就是路径里[1]前面的this.categoriesData要么不存在，要么长度不足2，没有索引为1的元素。

排查步骤 #

按顺序排查即可快速定位问题：

• 第一步先验证this指向：在执行eval的位置打个断点，或者直接打印console.log(this, this.categoriesData)。绝大多数这类场景都是this丢了——TS编译后class、组件方法的作用域如果没绑定，或者你把eval逻辑写在箭头函数、工具函数、异步回调里，this根本不指向你挂载categoriesData的实例，自然读不到属性。
• 第二步验证数据结构：如果this.categoriesData确实存在，打印它的长度，确认是否存在索引为1的元素；再打印this.categoriesData[1]，确认它上面是否存在children属性，值是不是null/undefined。
• 不要用裸eval：直接写eval(path)的时候，eval的执行上下文会跟着当前作用域变，你在不同位置调用同一段eval代码，this的指向可能完全不一样，非常容易出问题。

解决方法 #

快速修复（仅适合内部逻辑、路径完全可控的场景） #

如果暂时不想重构逻辑，先把根对象从this指向里摘出来，避免上下文漂移：

// 提前把正确的上下文存到固定变量里，eval里直接访问这个变量
const ctx = this
const accessPath = 'ctx.categoriesData[1].children[0]'
const res = eval(accessPath)

注意：只要访问路径是用户可编辑、可拼接的，绝对不能用eval，会存在任意代码执行的安全风险。

生产环境推荐方案（无eval、无上下文问题） #

写个简单的路径解析函数即可，不需要引入第三方库，从根源避开eval的所有坑：

function getByPath(obj: any, path: string, fallback = undefined) {
  // 把[]写法统一转成.分隔的字段段，比如a[0].b 拆成 ['a','0','b']
  const segments = path.replace(/\[(\w+)\]/g, '.$1').split('.').filter(Boolean)
  let cur = obj
  for (const key of segments) {
    if (cur === null || cur === undefined) return fallback
    cur = cur[key]
  }
  return cur ?? fallback
}

// 调用时直接把根对象传进去，完全不用纠结this指向
const target = getByPath(this, 'categoriesData[1].children[0]')

这个方案不存在索引类型问题：不管路径里的索引是字符串还是数字，JS对象访问时会自动做类型转换，obj['1']和obj[1]的效果完全一致。而且路径中间任意一级不存在都不会抛错，会直接返回你设置的默认值，也没有代码注入风险。

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