TypeScript中如何将多类型SetStateAction作为组件Props传递？

错误提示翻译 #

类型“Dispatch<SetStateAction<keyof ShoppingList | undefined>>”不能赋值给类型“Dispatch<SetStateAction<string | boolean | undefined>>”

问题原因 #

你给子组件的setStateFunc硬编码了包含所有可能类型的联合类型Dispatch，但TypeScript中，更具体的Dispatch类型（比如针对keyof ShoppingList | undefined的）无法赋值给更宽泛的联合类型Dispatch——前者只能接受特定类型的状态更新，而后者允许传入string/boolean等其他类型，这会破坏类型安全。

解决方案：用泛型让子组件适配任意状态类型 #

把子组件改成泛型组件，让props类型和父组件传入的状态类型动态匹配，既保证类型安全又能复用组件：

import { Dispatch, SetStateAction } from 'react';

// 定义泛型Props
interface ChildProps<T> {
  targetStateValue: T;
  setStateFunc: Dispatch<SetStateAction<T>>;
}

// 泛型子组件
export const Child = <T,>({ targetStateValue, setStateFunc }: ChildProps<T>) => {
  return <button onClick={() => setStateFunc(targetStateValue)}>BUTTON</button>;
};

父组件使用示例 #

现在任意页面的状态都能正确传入子组件，不会出现类型错误：

// Page 1 使用
<Child
  setStateFunc={setShoppingListKey}
  targetStateValue="someShoppingListKey" // 类型自动匹配keyof ShoppingList | undefined
/>

// Page 2 使用
<Child
  setStateFunc={setIsTrue}
  targetStateValue={true}
/>

// Page 3 使用
<Child
  setStateFunc={setString}
  targetStateValue="hello"
/>

修改后，子组件可复用在所有需要触发状态设置的场景，同时完全符合TypeScript的类型规范。

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