如何为React组件接收唯一联合类型的Prop设置TypeScript类型

核心方案：使用TypeScript泛型约束动态类型 #

通过将组件Props定义为泛型接口，让tabId的类型可以根据使用场景动态指定，保证tabs中的tabId、onClick的参数类型，以及外部回调函数的参数类型完全一致，消除类型不匹配的报错。

1. 修改Props为泛型接口 #

把原有的IProps改成泛型接口，用TabId约束字符串联合类型：

interface IProps<TabId extends string> {
  tabs: {
    label: string;
    tabId: TabId; // 用泛型替代原有的宽泛string类型
  }[];
  onClick: (tabId: TabId) => void; // 回调参数类型与tabId严格对齐
}

2. 定义泛型组件 #

将React组件改为泛型组件，接收TabId作为类型参数：

const Tabs = <TabId extends string>(props: IProps<TabId>) => {
  // 组件内部逻辑示例
  return (
    <div className="tabs-container">
      {props.tabs.map((tab) => (
        <button
          key={tab.tabId}
          onClick={() => props.onClick(tab.tabId)}
        >
          {tab.label}
        </button>
      ))}
    </div>
  );
};

3. 不同场景下的使用方式 #

场景1：使用'share' | 'home' | 'settings'类型

type HomeTabType = 'share' | 'home' | 'settings';

const [activeTab, setActiveTab] = useState<HomeTabType>('home');
const toggleTabs = (type: HomeTabType) => setActiveTab(type);

<Tabs
  tabs={[
    { label: '分享', tabId: 'share' },
    { label: '首页', tabId: 'home' },
    { label: '设置', tabId: 'settings' }
  ]}
  onClick={toggleTabs}
/>

场景2：使用'history' | 'shopping'类型

type ShopTabType = 'history' | 'shopping';

const [activeTab, setActiveTab] = useState<ShopTabType>('shopping');
const toggleTabs = (type: ShopTabType) => setActiveTab(type);

<Tabs
  tabs={[
    { label: '历史记录', tabId: 'history' },
    { label: '购物车', tabId: 'shopping' }
  ]}
  onClick={toggleTabs}
/>

补充说明 #

• TypeScript会自动根据tabs数组中tabId的字面量类型，推断出泛型TabId的具体类型，无需手动指定（如果需要明确约束，也可以显式传入，比如<Tabs<ShopTabType> {...props} />）。
• 这种方式从根源上保证了所有关联类型的一致性，彻底解决string类型无法赋值给具体联合类型的报错问题。

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