React组件Props中无法使用合并类型的问题求助

核心问题 #

你使用**交叉类型（&）**合并ThemeSizing和ThemeWidthSpecific，但这两个字符串字面量类型没有任何重叠成员，交叉后得到的是never类型——这就是报错的根源：

• list.component.tsx中width?: ThemeWidth等价于width?: never，任何字符串都无法赋值给never，触发Type string is not assignable to type never
• page.tsx中传递的字符串无法匹配undefined或never，触发Type string is not assignable to type undefined

错误代码（合并类型部分） #

export type ThemeWidth = ThemeSizing & ThemeWidthSpecific
export type ThemeHeight = ThemeSizing & ThemeHeightSpecific

修正方案 #

将交叉类型替换为联合类型（|），表示值可以是两个类型中的任意一种：

export type ThemeWidth = ThemeSizing | ThemeWidthSpecific
export type ThemeHeight = ThemeSizing | ThemeHeightSpecific

原理说明 #

交叉类型&要求值同时满足两个类型的所有约束，但ThemeSizing的成员（如'px'、'full'）和ThemeWidthSpecific的成员（如'svw'、'lvw'）完全不重叠，没有任何值能同时属于两个类型，因此结果为never。而联合类型|正好符合你“同时支持通用尺寸和视窗单位”的需求，合并后ThemeWidth会包含所有合法的尺寸值。

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