refactor: `VPMenu` related component use generic type for component (#4883)

src/client/theme-default/components/VPFlyout.vue

@@ -1,4 +1,5 @@
-<script lang="ts" setup>
+<script lang="ts" setup generic="T extends DefaultTheme.NavItem">
+import type { DefaultTheme } from 'vitepress/theme'
 import { ref } from 'vue'
 import { useFlyout } from '../composables/flyout'
 import VPMenu from './VPMenu.vue'
@@ -7,7 +8,7 @@ defineProps<{
   icon?: string
   button?: string
   label?: string
-  items?: any[]
+  items?: T[]
 }>()
 
 const open = ref(false)

src/client/theme-default/components/VPMenu.vue

@@ -1,9 +1,10 @@
-<script lang="ts" setup>
+<script lang="ts" setup generic="T extends DefaultTheme.NavItem">
+import type { DefaultTheme } from 'vitepress/theme'
 import VPMenuLink from './VPMenuLink.vue'
 import VPMenuGroup from './VPMenuGroup.vue'
 
 defineProps<{
-  items?: any[]
+  items?: T[]
 }>()
 </script>
 

src/client/theme-default/components/VPMenuGroup.vue

@@ -1,9 +1,10 @@
-<script lang="ts" setup>
+<script lang="ts" setup generic="T extends (DefaultTheme.NavItemComponent | DefaultTheme.NavItemChildren | DefaultTheme.NavItemWithLink)">
+import type { DefaultTheme } from 'vitepress/theme'
 import VPMenuLink from './VPMenuLink.vue'
 
 defineProps<{
   text?: string
-  items: any[]
+  items: T[]
 }>()
 </script>
 
@@ -11,7 +12,7 @@ defineProps<{
   <div class="VPMenuGroup">
     <p v-if="text" class="title">{{ text }}</p>
 
-    <template v-for="item in items">
+    <template v-for="item in items" :key="JSON.stringify(item)">
       <VPMenuLink v-if="'link' in item" :item />
     </template>
   </div>

src/client/theme-default/components/VPMenuLink.vue

@@ -1,11 +1,11 @@
-<script lang="ts" setup>
+<script lang="ts" setup generic="T extends DefaultTheme.NavItemWithLink">
 import type { DefaultTheme } from 'vitepress/theme'
 import { useData } from '../composables/data'
 import { isActive } from '../../shared'
 import VPLink from './VPLink.vue'
 
 defineProps<{
-  item: DefaultTheme.NavItemWithLink
+  item: T
 }>()
 
 const { page } = useData()