Primeng PanelMenu渲染嵌套重复项问题求助

渲染包含嵌套导航项的Primeng PanelMenu时，出现不符合编写结构的重复项：打开Documents项时，会额外渲染一份完整的sidebarMenu结构。

导航结构代码 #

export const sidebarMenu: MenuItem[] = [
  {
    label: 'Packages',
    icon: '',
    styleClass: '',
    url: '/packages',
    target: '_self',
  },
  {
    label: 'Documents',
    icon: '',
    styleClass: '',
    items: [
      {
        label: 'A',
        icon: '',
        url: '/a',
      },
      {
        label: 'B',
        icon: '',
        url: '/b',
      },
    ],
    target: '_self',
  },
  {
    label: 'Logout',
    icon: '',
    styleClass: '',
    url: '/',
    target: '_self',
  },
];

模板渲染代码 #

<p-panelMenu styleClass="h-16 w-full bg-grey" [model]="items"></p-panelMenu>

排查解决方向 #

• 检查组件中items的赋值逻辑：确认是否在初始化或变更检测时，意外将sidebarMenu本身赋值给了Documents的items属性，避免因引用错误导致重复渲染。
• 排查变更检测异常：若菜单数据通过异步操作更新，可尝试使用ChangeDetectorRef的detectChanges()方法手动触发变更检测，避免因检测时机问题引发的异常。
• 升级Primeng版本：部分旧版本PanelMenu存在嵌套渲染BUG，升级至最新稳定版（如v16及以上）后重试。
• 验证类型正确性：确保导入的MenuItem来自primeng/api，而非自定义同名类型，避免类型不匹配导致的渲染错误。
• 清理缓存并重启服务：清理浏览器缓存、重启开发服务器，排除旧代码缓存导致的异常。

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