React TypeScript中两层嵌套对象数组转单层对象数组实现方案

优先方案：原生TS/JS实现（零依赖） #

你的项目基于Vite构建，原生支持ES2019+数组API，不需要安装任何额外包即可实现，同时完全适配TypeScript类型校验。

首先定义菜单对应的TS类型：

type SidebarItem = {
  label: string;
  path?: string;
  icon?: string;
  children?: SidebarItem[];
}

通用递归实现（支持任意层级嵌套） #

不管后续菜单扩展到2层、3层还是更多嵌套都能正确拍平，是生产环境推荐的写法：

const flattenSidebar = (list: SidebarItem[]): Omit<SidebarItem, 'children'>[] => {
  return list.flatMap(item => {
    if (item.children?.length) {
      return flattenSidebar(item.children)
    }
    const { children: _, ...rest } = item;
    return [rest];
  })
}

// 直接调用即可得到期望结构的数组
const sidebarExpected = flattenSidebar(sidebar);

固定两层结构的极简实现 #

如果你的侧边栏结构永远只有两层，不会出现更深层级的子菜单，可以用更精简的写法：

const sidebarExpected = sidebar.flatMap(item => item.children ?? [item]);

注意：该写法无法处理三层及以上的嵌套菜单，仅适用于固定两层结构的场景。

备选方案：lodash实现（需安装依赖） #

如果项目后续有大量数据处理需求，想引入lodash通用工具库，可以按以下步骤操作：

1. 用Yarn安装依赖和对应的TS类型包：

yarn add lodash
yarn add -D @types/lodash

2. 拍平实现代码：

import _ from 'lodash';

const sidebarExpected = _.flatMapDeep(sidebar, (item) => {
  return item.children || item;
})

以上两种方案输出的结果都和你给出的期望数组结构完全一致。

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