Reactjs 具有联合类型和泛型的Typescript数组要求编译时字段是可选的

我试图在TypeScript下为我的React路由器配置创建一个页面映射。由于每个页面将由不同的组件类型生成，并且这些不同的组件将具有不同的属性，因此我希望使用通用容器，但保留组件与其props接口之间的语义链接

我希望地图的每个元素都由几个字段定义，名义上是名称、显示页面的组件以及该组件的相关道具。我认为仿制药似乎是一种明智的方法：

类型PageDef={
名称：字符串；
组件：功能组件；
道具：T；
}

（注意：我也尝试将其作为一个接口，但存在相同的问题。）

对于本例，假设我已经定义了两个props接口和两个相应的功能组件（实际上还有很多…）：

导出接口PropsOne{
测试1：字符串
}
导出接口PropsTwo{
测试2：编号
}
功能组件一（道具：PropsOne）{
返回{props.test_1}
}
功能组件二（道具：道具二）{
返回{props.test_2}
}

然后，我创建一个页面映射，如下所示：

type SupportedPages=PageDef | PageDef；
常量页：数组=[
{
名称：“第一页”，
组件：组件一，
道具：{
测试1：“你好，世界”
}
},
{
名称：“第二页”，
组件：组件二，
道具：{
测试2:42
}
}
]

到目前为止没有错误

当我在主页组件中使用

页面时，问题就出现了：

函数主页（道具：{pages:Array}）{
返回
{props.pages.map（页面=>{
const PageComponent=page.component；
返回
})}
}

这里我在
PageComponent
标签上有一个错误：

TS2322: Type '{ test_1: string; } | { test_2: string; }' is not assignable to type 'IntrinsicAttributes & PropsOne & { children?: ReactNode; } & PropsTwo'.
Property 'test_2' is missing in type '{ test_1: string; }' but required in type 'PropsTwo'.

我真的不明白这告诉我什么-似乎道具类型被推断为两个道具的交点？不过我很确定我希望是工会

如果页面类型为
FunctionalComponent
，则
props
应为
PropsOne
类型，它不应关心
PropsTwo
中的字段，反之亦然

我可以在短期内通过在props界面中选择字段来解决这个问题，但这并不符合TypeScript的精神。我想也许拥有一系列混合类型也不是特别好的练习

我是TS新手，所以我怀疑我误解了应该如何推断属性类型。很高兴听取关于构建此功能的最佳方法的建议。
我们可以看看PageComponent的外观吗？@JacobSmit PageComponent是
ComponentOne
或
ComponentTwo
的一个实例。这是TypeScript缺乏对我所称的“相关联合”记录类型的支持的另一个例子；看见目前唯一合理的解决方法是使用类型断言，如
as any
，或者一些不太允许但在技术上仍然不安全的东西。