React Typescript面包屑组件最多5层嵌套的递归接口如何定义？

原有写法的问题 #

你给出的原有写法是错误的，存在两个问题：

• children被定义为必填属性，不符合需求中可选、可设为null的要求
• 没有限制嵌套深度，允许无限层级嵌套，不符合你要求的最大嵌套深度为5的规则

可选实现方案 #

方案1：业务约定深度（无强类型校验） #

如果只是业务上约定不超过5层嵌套，不需要TypeScript强制校验深度，只需要把children改为可选、允许null值即可：

export interface MyProps {
  title: string;
  url: string;
  children?: MyProps | null;
}

方案2：强类型限制最大深度为5 #

如果需要TypeScript在编译阶段就限制嵌套层级不能超过5，可以用带深度计数的泛型接口实现：

// 深度计数元组，下标对应允许的剩余嵌套层数
type DepthLevel = [never, 0, 1, 2, 3, 4]

// 泛型默认值为5，代表最大支持5层嵌套
export interface BreadcrumbProps<D extends number = 5> {
  title: string;
  url: string;
  // 剩余深度为0时不允许再传入children
  children?: D extends 0 ? never : BreadcrumbProps<DepthLevel[D]> | null
}

使用该定义后，如果嵌套层级超过5，TypeScript会直接抛出类型错误，符合你的需求。

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