Reactjs 使用类型字段将数据对象映射到使用TypeScript的特定组件

我们有一个节点（树）结构中的内容，其中每个节点都有一个类型

键入NodeType=“text”|“image”；
接口节点{
类型：T；
}

为了简单起见，我们假设得到的内容不是一棵树，而是一组不同类型的节点：

type Content=Nodes[NodeType][]；
const content:content=[{type:“text”}，{type:“image”}]；

现在，我想迭代此内容，并根据

节点的
类型
呈现不同的
组件
：

函数应用程序（）{
常量内容：节点[NodeType][]=[{type:“text”}，{type:“image”}]；
返回(
{contents.map（（节点）=>{
const Component=getComponent（节点）；
返回；
})}
);
}

我在实现
getComponent
函数时遇到了很大的问题

函数getComponent（节点：N）：React.FC；

我无法使
TypeScript
正确地将不同类型的
Node
s映射到接受这些
Node
s的
FC
s

因此，我希望实现的是获得一个函数，该函数将接受
文本
或
图像
节点，并返回一个
FC
，该函数将接受
节点
作为属性，所以

getComponent（节点：node）：React.FC；
getComponent（节点：node）：React.FC；

我在这里用我的实现创建了一个代码沙盒


我仍然会复制并粘贴到这里

import React，{ReactElement}来自“React”；
键入NodeType=“text”|“image”；
接口节点{
类型：T；
}
类型节点={
[T in NodeType]：节点；
};
类型组件={
[T in NodeType]：NodeFC；
};
类型NodeFC=（props:{node:Nodes[T]}）=>ReactElement；
常量组件：组件={
文本：（{node}）=>
类型“NodeFC | NodeFC”不可分配给类型“N扩展节点？NodeFC:never”。
类型“NodeFC”不可分配给类型“N扩展节点”？NodeFC:never'.ts（2322）

我已经尝试了许多实现，但我仍然无法将具有特定
类型的
节点
映射到特定的
反应组件
，该组件将接受该
节点作为
道具。


以下是他改变的不同之处：



以及CodeSandbox上的完整代码：


import React，{ReactElement}来自“React”；
键入NodeType=“text”|“image”；
接口节点{
类型：T；
}
类型节点={
[T in NodeType]：节点；
};
类型组件={
[输入T]：NodeFC；
};
类型NodeFC=（props:{node:Nodes[T]}）=>ReactElement；
常量组件：组件={
text:（{node}）=>{node.type}，
图像：（{node}）=>{node.type}
};
函数getComponent(
节点：N
)：NodeFC{
返回组件[node.type]；
}
const Content=（props:{node:node}）=>{
const Component=getComponent（props.node）；
返回；
};
导出默认函数App（）{
常量内容：节点[NodeType][]=[{type:“text”}，{type:“image”}]；
返回(
{contents.map（（节点）=>(
))}
);
}

Type 'NodeFC<"text"> | NodeFC<"image">' is not assignable to type 'N extends Node<infer T> ? NodeFC<T> : never'.
  Type 'NodeFC<"text">' is not assignable to type 'N extends Node<infer T> ? NodeFC<T> : never'.ts(2322)