TypeScript中TSX组件用对象方括号表示法访问动态props报索引签名错误

你遇到的类型报错核心来自两个TS类型规则：

• 你的characters对象没有声明通用字符串索引签名，且键是固定的design/front/back/engineer四个字面量类型，TS不允许用通用string类型直接索引该对象。
• Object.keys()默认返回值类型为string[]，TS不会自动将其推导为目标对象的键联合类型，因此用characterNames[i]索引characters时也会触发类型不匹配。

同时原有代码还存在隐式风险：你声明的name/text/image变量未初始化，即使逻辑上你认为一定会命中if分支，TS依然会判定其可能为undefined，后续使用也会触发类型报错。

从类型源头约束取值合法性，同时简化冗余的循环逻辑：

1. 先提取characters对象的键联合类型，自动匹配所有已有键
2. 约束组件Props的character属性只能是合法键值
3. 直接通过传入的character属性读取对应配置，无需循环判断

修改后的完整组件代码：

import React, { useState } from "react";
import styles from "../styles/points.module.css";
import Image from "next/image";
import { characters } from "../utils/characters";

// 自动推导characters的所有键为联合类型：'design'|'front'|'back'|'engineer'
type CharacterKey = keyof typeof characters;
// 约束props的character只能传入合法键值
type PointsCardProps = { character: CharacterKey };

export const PointsCard = ({ character }: PointsCardProps) => {
  const [points, setPoints] = useState(0);
  // 直接取值，TS完全识别类型，不会报错
  const currentChar = characters[character];

  return (
    <div className={styles.card}>
      <Image src={currentChar.image} width={100} height={100} alt={currentChar.name} />
      <div>
        <h5>{currentChar.name}</h5>
        <p>{currentChar.text}</p>
      </div>
    </div>
  );
};

如果暂时无法约束Props的传入类型，且你可以确保传入的character一定是合法键，可以用类型断言绕过校验，该方案不推荐长期使用，无法避免非法值传入导致的运行时报错：

// 仅做临时兼容使用
const currentChar = characters[character as keyof typeof characters];

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