需要幫助創建動態導航菜單

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;
    });
}