React+TypeScript访问对象id遇TS(7015)及属性不存在错误求助

问题复现 #

使用React搭配TypeScript开发时，尝试访问包含10个带id属性的对象数组中的id字符串值，控制台能输出预期结果，但触发两个TypeScript错误：

1. "Element implicitly has an 'any' type because index expression is not of type 'number'.ts(7015)"
2. 尝试用[index].id访问时，返回"Property 'id' does not exist on type 'string'"

问题根源 #

从变量定义信息来看，核心是类型不匹配：

• 数组索引必须是数字类型，你使用了非数字类型的索引值，导致TS无法推断数组元素类型，抛出any类型警告；
• 你误操作了字符串数组（比如mangaFileNames是string[]类型），而非预期的带id属性的对象数组，所以访问.id时触发属性不存在的错误。

解决步骤 #

1. 给对象数组声明明确的类型 #

先定义包含id属性的对象类型，再给状态和数组变量指定该类型：

// 定义对象类型，可根据实际需求添加其他属性
interface MangaItem {
  id: string;
}

// 给状态指定类型，确保数组元素是带id的对象
const [upcomingMangaIdArray, setUpcomingMangaIdArray] = useState<MangaItem[]>([]);

2. 确保索引为数字类型 #

如果你的索引是字符串（比如从循环key、接口返回值拿到的字符串），先转换为数字并做合法性校验：

// 假设index是字符串类型，先转成数字
const numIndex = Number(index);
// 校验索引合法性，避免数组越界
if (!isNaN(numIndex) && numIndex >= 0 && numIndex < upcomingMangaIdArray.length) {
  const targetId = upcomingMangaIdArray[numIndex].id;
  // 正常使用targetId即可
}

3. 区分字符串数组与对象数组 #

明确mangaFileNames（字符串数组）和upcomingMangaIdArray（对象数组）的用途，不要混淆操作对象，确保你访问.id的是对象数组而非字符串数组。

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