TypeScript泛型递归函数报错求助：类型不兼容问题

你的问题出在第二个泛型参数TWithChild的约束逻辑上：当T是联合类型（比如错误提示里的BusinessAreaWithAccess和其他类型的联合）时，TypeScript无法正确解析递归的联合类型扩展，导致返回值类型与TWithChild的约束不匹配。

修正方案 #

去掉额外的泛型参数，改用递归类型别名明确定义带children的结构，再调整函数返回逻辑：

// 递归类型：给原类型T追加children属性，children是同类型的数组
type WithChildren<T extends { id?: string; parentId?: string }> = T & {
  children: WithChildren<T>[];
};

function withChildren<T extends { id?: string; parentId?: string }>(
  parentItem: T,
  items: T[]
): WithChildren<T> {
  const children = items.filter(item => item.parentId === parentItem.id);
  // 用类型断言告诉TypeScript，返回结构符合WithChildren<T>的定义
  return {
    ...parentItem,
    children: children.map(child => withChildren(child, items))
  } as WithChildren<T>;
}

为什么这样能解决问题 #

1. 递归类型别名WithChildren<T>直接明确了「原类型+children数组」的结构，TypeScript能正确处理联合类型的递归扩展；
2. 类型断言as WithChildren<T>是因为TypeScript的结构类型系统对递归对象的自动推断存在局限性，手动确认类型后即可消除错误。

联合类型场景测试示例 #

// 定义两个基础类型
type BusinessArea = { id?: string; parentId?: string; name: string };
type BusinessAreaWithAccess = BusinessArea & { access: boolean };

// 混合类型的数组
const areas: (BusinessArea | BusinessAreaWithAccess)[] = [
  { id: "1", name: "Root" },
  { id: "2", parentId: "1", name: "Child" },
  { id: "3", parentId: "2", name: "Grandchild", access: true }
];

// 生成树形结构，类型会正确推断为WithChildren<BusinessArea | BusinessAreaWithAccess>
const tree = withChildren(areas[0], areas);

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