如何编写递归函数处理嵌套JSON生成React层级导航菜单

核心逻辑规则 #

递归实现只需要严格按节点类型分支处理，不需要额外复杂逻辑：

• 判定为file类型节点时，直接按文件节点规则映射字段，作为递归终止分支，不再向下遍历
• 判定为directory类型节点时，先映射目录节点的固定字段，再遍历其下的children数组，对每个子节点递归执行转换逻辑，将转换结果挂载到当前目录节点的children属性
• 增加异常数据兜底，对不符合两类节点定义的脏数据直接过滤，避免遍历中断

可直接运行的实现代码 #

const buildNavBlock = (node) => {
  // 文件节点分支：递归终止
  if (node.type === 'file') {
    return {
      id: `paper.${node.name}`,
      title: node.name,
      type: 'item',
      url: node.downloadUrl
    }
  }

  // 目录节点分支：递归处理子节点
  if (node.type === 'directory') {
    return {
      id: `apps.${node.name}`,
      title: node.name,
      type: 'collapse',
      icon: 'heroicons-outline:folder',
      children: Array.isArray(node.children)
        ? node.children.map(child => buildNavBlock(child)).filter(Boolean)
        : []
    }
  }

  // 异常节点返回null，后续过滤掉
  return null
}

// 入口调用：原始导航数据一般为数组结构，遍历每个根节点执行转换
const finalNavConfig = originalNavDataSource
  .map(rootNode => buildNavBlock(rootNode))
  .filter(Boolean)

遍历层级不全的常见排查点 #

• 未做数组类型校验：如果部分目录节点的children字段为undefined或非数组，直接调用map方法会抛出JS错误，导致整个递归流程中断
• 未接收递归返回值：部分实现仅对子节点调用了递归函数，但没有将函数返回结果赋值给当前节点的children字段，会导致深层嵌套节点全部丢失
• 根节点处理错误：如果原始数据源最外层是数组结构，直接把整个数组传入递归函数会触发异常分支，需要遍历数组每一项分别调用转换函数
• 前缀拼写错误：注意目录节点id前缀为apps.，文件节点id前缀为paper.，不要混淆两类节点的前缀规则

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