TypeScript索引类型报错：常量对象与类型匹配仍提示错误

报错原因 #

TypeScript 报错的核心是：componentArray的类型被推断为联合类型分支，当你用props.identification.type（"type_1" | "type_2" | "type_3"）去索引该联合类型时，TS要求联合类型的所有分支都必须包含当前索引属性。但type_1不存在于ident_2对应的对象分支，type_2/type_3也不存在于ident_1的分支，因此触发索引类型不兼容错误。

尽管你的PossibleProps已经保证了ident和type的组合合法，但TS无法在链式索引的场景下自动推导两者的关联关系。

优雅解决方案 #

方案1：用类型守卫缩小类型范围 #

通过判断ident的值，让TS明确当前分支下type对应的属性一定存在：

type PossibleProps =
  {identification: { ident: 'ident_1', type: 'type_1' }} |
  {identification: { ident: 'ident_2', type: 'type_2' }} |
  {identification: { ident: 'ident_2', type: 'type_3' }};

const getComponent: React.FC<PossibleProps> = (props) => {
    const componentArray = {
        ident_1: { type_1: "ComponentOne" },
        ident_2: { type_2: "ComponentTwo", type_3: "ComponentThree" },
    } as const;

    let Component = "ErrorUi";
    const { ident, type } = props.identification;

    if (ident === 'ident_1') {
        // TS此时明确type只能是'type_1'，索引合法
        Component = componentArray.ident_1[type];
    } else {
        // TS此时明确type只能是'type_2' | 'type_3'，索引合法
        Component = componentArray.ident_2[type];
    }

    return <Component {...props} />;
};

方案2：重构类型系统，单一数据源同步类型与组件映射 #

定义一个组件映射作为唯一数据源，自动生成PossibleProps类型，彻底避免类型与映射不一致的问题：

// 单一数据源：维护组件映射即可
const ComponentMap = {
    ident_1: { type_1: "ComponentOne" },
    ident_2: { type_2: "ComponentTwo", type_3: "ComponentThree" },
} as const;

// 基于ComponentMap自动生成PossibleProps类型
type ComponentMapType = typeof ComponentMap;
type PossibleProps = {
    identification: {
        [K in keyof ComponentMapType]: {
            ident: K;
            type: keyof ComponentMapType[K];
        };
    }[keyof ComponentMapType];
};

const getComponent: React.FC<PossibleProps> = (props) => {
    const { ident, type } = props.identification;
    // TS能自动推导ident与type的关联关系，索引合法
    const Component = ComponentMap[ident][type] || "ErrorUi";
    return <Component {...props} />;
};

此方案无需手动维护PossibleProps，所有类型都由组件映射自动生成，是扩展性最强的方案。

方案3：类型断言快速解决 #

如果不想改动原有结构，可通过类型断言告诉TS当前索引合法（需手动保证类型与映射同步）：

const getComponent: React.FC<PossibleProps> = (props) => {
    const componentArray = {
        ident_1: { type_1: "ComponentOne" },
        ident_2: { type_2: "ComponentTwo", type_3: "ComponentThree" },
    } as const;

    const { ident, type } = props.identification;
    const Component = componentArray[ident]?.[
        type as keyof typeof componentArray[typeof ident]
    ] || "ErrorUi";
    
    return <Component {...props} />;
};

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