React TypeScript报错：‘string’类型无法用于对象索引

场景说明 #

我有一个DetailPage组件，以及名为data.json的JSON数据，数据结构示例如下：

data = {
  mobile: [...someData], speaker:[...someData],
  // 其他分类字段
}

尝试用useParams Hook获取路由参数，将其作为对象键访问数据，代码如下：

import data from "../data/data.json";

const DetailPage = () => {
  const { category, id } = useParams();
  return <h1>{data[category][id].title}</h1>;
};
export default DetailPage;

遇到的错误 #

第一个错误：

Type 'undefined' cannot be used as an index type.

我已通过添加类型守卫解决该问题：

<h1>{category !== undefined && data[category][id].title}</h1>

但无法处理第二个错误：

Element implicitly has an 'any' type because expression of type 'string' can't be used to index type

解决方案 #

方案1：定义完整数据类型（推荐） #

通过TypeScript类型别名明确限定数据结构，让TS能识别合法的分类键：

// 定义单条数据的类型
type Item = {
  title: string;
  // 根据实际数据补充其他字段
};

// 定义整个data的结构，列出所有允许的分类键
type DataStructure = {
  mobile: Item[];
  speaker: Item[];
  // 补充其他分类
};

// 导入数据并指定类型
import rawData from "../data/data.json";
const data = rawData as DataStructure;

修改组件代码，同时处理id的类型转换与合法性校验：

const DetailPage = () => {
  const { category, id } = useParams();
  
  // 校验参数合法性
  if (!category || !(category in data) || isNaN(Number(id))) {
    return <h1>无效的分类或ID</h1>;
  }

  // 安全访问数据
  const targetItem = data[category as keyof DataStructure][Number(id)];
  return <h1>{targetItem.title}</h1>;
};

方案2：快速类型断言（适合简单场景） #

若不想编写完整类型定义，可直接对category做类型断言，告诉TS它是data的合法键：

const DetailPage = () => {
  const { category, id } = useParams();
  
  if (!category || !(category in data) || isNaN(Number(id))) {
    return <h1>无效的分类或ID</h1>;
  }

  // 断言category为data的键类型
  const targetItem = data[category as keyof typeof data][Number(id)];
  return <h1>{targetItem.title}</h1>;
};

关键说明 #

• 路由参数category和id默认类型为string | undefined，必须做存在性校验
• 需将id转为数字类型，因为数组索引为数字，而路由参数是字符串
• 完整类型定义能提前发现潜在的键名拼写错误，提升代码健壮性

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