React中如何为嵌套对象的keyof类型定义组件Props？

问题场景 #

需要在React组件中使用嵌套对象的键时，为Props强制正确的类型约束。数据结构定义如下：

interface Test {
    group1: {
        a: string
        b: boolean
        c: number
    }
    group2: {
        g: string
        h: number
        i: boolean
    }
}

组件调用方式示例：

<MyComponent group="group1" key="a" />

尝试直接定义Props类型时出现问题：

interface MyComponentProps {
  group: keyof Test
  key: keyof Test[MyComponentProps['group']]
}

VS Code智能提示显示key的类型为never，无法根据传入的group参数自动匹配对应分组的合法键值，期望实现key随group动态识别可选值。

解决方案 #

通过泛型绑定group和key的类型关联，即可实现动态的类型约束：

1. 定义泛型Props接口 #

interface MyComponentProps<G extends keyof Test> {
  group: G
  key: keyof Test[G]
}

2. 实现泛型React组件 #

const MyComponent = <G extends keyof Test>(props: MyComponentProps<G>) => {
  // 编写组件业务逻辑
  return <div>{props.group}: {props.key}</div>
}

效果验证 #

调用组件时，TypeScript会自动推导泛型参数：

• 当传入group="group1"，key的可选值会自动提示为'a' | 'b' | 'c'
• 当传入group="group2"，key的可选值会自动提示为'g' | 'h' | 'i'
  如果传入不匹配的键值（比如group="group1"时传key="g"），TypeScript会直接抛出类型错误，实现了严格的类型校验。

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