React TypeScript中字符串索引对象报错：Element implicitly has an 'any' type

这个报错的核心原因是TypeScript无法推断submitted对象的索引类型——当前它被识别为{}（空对象类型），而TypeScript不允许用任意字符串去索引空对象类型。

解决方案1：给submitted定义正确的索引类型 #

找到你定义appState类型的地方，把submitted的类型明确为字符串键映射到答案对象的结构，比如：

// 假设appState的类型是这样，修改submitted的定义
type AppState = {
  // 其他属性...
  submitted: Record<QuestionData['id'], { [answerId: string]: string }> | null;
};

这里Record<QuestionData['id'], ...>表示键是QuestionData里的id类型（也就是string），值是包含答案键值对的对象。如果submitted可能为空，记得加上| null。

修改后，submitted[question.id]就能被TypeScript正确识别类型，不会再报错。

解决方案2：临时类型断言（不推荐，仅应急用） #

如果暂时无法修改appState的类型，可以用类型断言告诉TypeScriptsubmitted的结构：

const submittedAnsId = submitted && (submitted as Record<string, { [key: string]: string }>)[question.id];

这种方法会跳过TypeScript的类型检查，所以尽量优先用方案1来保证类型安全。

补充说明 #

你的submitted数据格式是{Q1: {Q1A1: 'test'}, Q2: {Q2A3: 'abc'}}，对应的类型就是键为字符串、值为嵌套键值对对象的结构，只要把这个结构明确告诉TypeScript，就能解决索引报错的问题。

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