React+TypeScript传参时报Type 'string' is not assignable to type 'undefined'错误如何解决

问题原因 #

调用useState时仅传入初始值""，TypeScript会自动推断value的类型为通用string类型，而ChannelForm要求的value参数是"general" | "competitive" | "social" | "podcast" | undefined的字面量联合类型，通用string无法分配给这个窄类型，因此触发类型报错。

同时你给出的Menu.Item点击事件代码存在语法错误，回调函数后多了一个多余的右括号，需要修正。

解决方案 #

方案1（推荐）：给useState添加泛型约束，从源头限定类型 #

首先将ChannelForm的value类型抽离为可复用的公共类型：

// 可放在ChannelForm组件的类型定义文件中统一维护
type ChannelFormValue = "general" | "competitive" | "social" | "podcast";

在调用useState时传入泛型明确类型，根据你的初始值场景选择对应写法：

1. 如果你需要保留空字符串作为初始状态：

const [value, setValue] = useState<ChannelFormValue | "">("");

2. 如果你可以用undefined作为初始状态，更贴合props的可选定义：

const [value, setValue] = useState<ChannelFormValue | undefined>(undefined);

设置完成后setValue仅允许传入合法的枚举值，后续所有使用value的位置都会自动匹配类型，无需额外处理。

方案2：类型断言临时兼容 #

如果仅需要快速修复传递props的报错，可在传值时添加类型断言，该方法不推荐长期使用，无法约束setValue的传值合法性：

<ChannelForm
  value={value as ChannelFormValue}
/>

语法修正 #

原代码中Menu.Item的点击事件存在多余右括号，修正后代码如下：

<Menu.Item onClick={() => setValue("general")}>
</Menu.Item>

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