如何解决TypeScript/Next.js/React项目中的TS7015类型错误？

错误原因 #

你遇到的TS7015错误本质是：data的类型为Product[] | null（数组或空值），而数组仅支持数字类型索引，但current_product是字符串类型，TypeScript不允许用字符串索引数组，因此触发类型错误。

你之前尝试的data[current_product as keyof typeof data]无效，因为keyof typeof data指向的是数组对象的内置属性（比如length、map、push等），并非数组元素的数字索引，所以这个类型断言完全不符合需求。

针对性解决方案 #

根据current_product的实际用途，分两种场景处理：

场景1：current_product是产品的唯一标识（如id、slug） #

如果current_product是产品的唯一键（比如Product类型里的id字段），需要先在数组中查找匹配的产品，再获取图片：

// 先处理data为null的情况，再通过唯一标识查找产品
const targetProduct = data?.find(product => product.id === current_product);
// 可选链+空值合并，确保类型安全
const main_image = targetProduct?.main_image ?? null;

场景2：current_product是数组索引的字符串形式 #

如果current_product本来就是数组的索引，但被存储为字符串（比如"0"、"1"），需要先将其转为数字，并验证有效性：

// 把字符串转为数字，指定十进制解析
const productIndex = parseInt(current_product, 10);

// 多层校验：data不为null、转换后的索引是有效数字、索引在数组范围内
const main_image = 
  data && !isNaN(productIndex) && productIndex >= 0 && productIndex < data.length
    ? data[productIndex].main_image
    : null;

类型优化建议 #

为了从根源避免这类问题，建议在@context/amazon的useAmazon Hook中，细化current_product的类型：

• 如果是产品唯一标识，将其类型定义为Product['id']（假设Product有id字段），而非宽泛的string；
• 如果是数组索引，直接定义为number类型，避免存储为字符串。

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