使用TypeScript渲染Ant Design Tree组件无数据返回的解决方法

嘿，我找到问题的根源啦——你的renderTreeNodes函数在处理数组时没有返回map的结果，导致整个函数没有输出任何节点，这就是子渲染为空的原因！

问题分析 #

你看这段代码：

if (data !== undefined) {
  data.map(item => {
    // ... 返回TreeNode的逻辑
  });
}

这里你调用了data.map()生成了TreeNode数组，但没有把这个数组return出去，所以函数执行到这里就没有返回值，自然渲染不出内容。而你注释的测试<TreeNode>能正常显示，是因为它直接作为Tree的子元素存在，和这个渲染函数无关。

修正后的完整代码 #

下面是修复后的TypeScript版本，还优化了一些类型处理和逻辑严谨性：

import React from "react";
import { Tree, TreeNodeProps } from "antd";
import "./GeoFilter.css";

const { TreeNode } = Tree;

export const geoData = [
  {
    "value": "1|dl|1",
    "title": "Campingområdet",
    "children": [
      { "value": "1|dl|1 | C1", "title": "Södra Campingområdet", "children": undefined },
      { "value": "1|dl|1 | C2", "title": "Östra Campingområdet", "children": undefined }
    ]
  },
  {
    "value": "1|PR|2",
    "title": "Stugområdet",
    "key": "1|PR|2",
    "children": [
      { "value": "1|PR|2 | C1", "title": "Södra Stugområdet", "children": undefined },
      { "value": "1|PR|2 | C2", "title": "Östra Stugområdet", "children": undefined }
    ]
  }
];

export interface IGeoFilterItem {
  value: string;
  title: string;
  children?: Array<IGeoFilterItem>; // 用可选属性替代undefined，更符合TypeScript规范
}

const GeoFilterTree = () => {
  // 用箭头函数也可以，这里保持你的函数写法，修复返回问题
  const renderTreeNodes = (data: Array<IGeoFilterItem> | undefined) => {
    if (!data) return null; // 空数据直接返回null，不需要空TreeNode
    
    // 关键：返回map生成的节点数组
    return data.map(item => {
      // 检查children是否存在且不为空数组
      if (item.children && item.children.length > 0) {
        return (
          <TreeNode
            title={item.title}
            key={item.value}
            dataRef={item}
          >
            {renderTreeNodes(item.children)}
          </TreeNode>
        );
      }
      return <TreeNode key={item.value} title={item.title} />;
    });
  };

  return (
    <Tree checkable>
      {renderTreeNodes(geoData)}
    </Tree>
  );
};

export default GeoFilterTree;

关键修改点 #

• 在data.map()前添加了return，让函数返回生成的TreeNode数组
• 把children: Array<IGeoFilterItem> | undefined改成了可选属性children?: Array<IGeoFilterItem>，更符合TypeScript的类型规范
• 优化了空数据的处理：当data不存在时直接返回null，不需要返回空的<TreeNode>，Tree组件会自动处理空的子节点
• 增加了item.children.length > 0的判断，避免传入空数组时生成不必要的嵌套

这样修改后，你的树形结构就能正常渲染啦！

内容的提问来源于stack exchange，提问作者Per-Erik Modig