需要帮助创建动态导航菜单

Question

我正在为线框图应用程序创建一个应用程序。 我正在研究 function，用于从线框应用程序的数据中生成链接，这些链接将包含部分内不可预测的部分。 各部分的界面形状如下

export interface ProjectObject{
    title: string;
    link?: string;
    summary?: string;
    description?: DescriptionPoint[];
    sections?: ProjectObject[];
    elements?: ProjectElement[];
    challenges?: ProjectChallenges[];
    feedback?: ProjectFeedbackItem[];
}

我想要做的是从每个 object 中提取title和link属性并将其存储在一个形状像这样的变量中

export interface NavLink{
    title: string;
    link: string;
    subLinks?: NavLink[]
}

标题和链接属性当然是要从每个 object 中提取的属性。 subLinks属性用于保存要从 section 属性中的其他sections检索的嵌套链接。

我想出了以下 function 试图提取和形成链接

createProjectLinks(data: ProjectObject[]){
    return data.map(a=>{
        let links: NavLink = {
            title: a.title,
            link: a.link,
            subLinks: this.createProjectLinks(a.sections)};
        return links;
    });
}

将ProjectObject数组传递给它时，出现以下错误

错误类型错误：无法读取未定义的属性“地图”

起初我认为这是一个异步问题，但我在组件正上方创建了一个const作为虚拟数据以避免异步问题，并且我仍然遇到同样的错误，将虚拟数据传递到 function。 我究竟做错了什么？ 我有更好的方法来实现这个功能吗？

Answer 1

以下错误不是 typescript 问题，而是 javascript 问题

TypeError: Cannot read property 'map' of undefined

做这个

createProjectLinks(data: ProjectObject[] = []){ //give default value of [] to prevent mapping on undefined data
    return data.map(a=>{
        let links: NavLink = {
            title: a.title,
            link: a.link,
            subLinks: this.createProjectLinks(a.sections)};
        return links;
    });
}