报错 Cannot read properties of undefined (reading ‘propsData‘)“ ？ 看我的就行，最新解决方法

如何解决

看代码

父组件

<template>
  <div class="page-header-index-wide page-header-wrapper-grid-content-main">
    <a-menu
      style="width: 256px"
      :default-selected-keys="['1']"
      :default-open-keys="['sub1']"
      mode="inline"
      :selected-keys="[current]"
      @click="handleClick"
    >
      <template v-for="item in menuList">
        <!-- 根节点，无子节点的情况 -->
        <a-menu-item v-if="!item.helpCenterList.length" :key="item.id">
          <a-icon type="pie-chart" />
          <span>{{ item.title }}</span>
        </a-menu-item>
        <!-- 有子节点，有children的使用可折叠-->
        <hepler-menu  v-else :key="item.id + 'helper-sub-menu'" :menu-info="item"></hepler-menu >
      </template>
    </a-menu>
  </div>
</template>
  
  <script>

import { helpCenterList } from '@/api/helpCenter.js'
import HeplerMenu from './component/HeplerMenu.vue'
export default {
  components: {
    HeplerMenu,
  },
  data() {
    return {
      current: '1',
      menuList: [],
    }
  },
  created() {
    this.helpCenterList()
  },
  methods: {
    handleClick(e) {
      console.log('click ', e)
      this.current = e.key
    },
    async helpCenterList() {
      const data = await helpCenterList()
      this.menuList = data
    },
  },
}
</script>
  

子组件

<template functional>
  <a-sub-menu :key="props.menuInfo.id + 'helper-sub-menu'" v-bind="$props" v-on="$listeners">
    <span slot="title">
      <a-icon type="mail" /><span>{{ props.menuInfo.title }}</span>
    </span>
    <template v-for="item in props.menuInfo.helpCenterList">
      <!-- 根节点，无子节点情况 -->
      <a-menu-item v-if="!item.helpCenterList.length" :key="item.id">
        <a-icon type="pie-chart" />
        <span>{{ item.title }}</span>
      </a-menu-item>
      <!-- 有子节点，有children的使用可折叠递归组件 -->
      <HeplerMenu v-else :key="item.id + 'helper-menu'" :menu-info="item" />
    </template>
  </a-sub-menu>
</template>

<script>
import { Menu } from 'ant-design-vue';
export default {
  isSubMenu: true,
  name: 'HeplerMenu',
  props: {
    ...Menu.SubMenu.props,
    // Cannot overlap with properties within Menu.SubMenu.props
    menuInfo: {
      type: Object,
      default: () => ({}),
    },
  },
}
</script>


<style lang="scss" scoped>
</style>