VueJS中如何修复‘Type 'void' is not assignable to type 'Function'’错误？

错误原因 #

你在父组件传递actionDelete时，直接执行了actionDelete(media.uuid)，这会立刻调用该函数并将它的返回值（此处为void）传给子组件的actionDelete属性，但子组件期望接收的是函数类型的值，因此触发了类型不匹配的报错。

解决方案 #

有两种常用的修正方式：

方式一：用箭头函数包裹调用逻辑 #

在父组件中用箭头函数把删除操作的调用逻辑包起来，这样传递给子组件的就是一个函数，只有当子组件触发点击事件时才会执行：

<MediaItemComponent :media="media" :actionDelete="() => actionDelete(media.uuid)" />

方式二：直接传递函数引用，子组件调用时传参 #

如果父组件的actionDelete本身就是接收uuid参数的函数，可以直接传递函数引用，子组件点击时再传入对应的参数：

• 父组件传递函数引用：

<MediaItemComponent :media="media" :actionDelete="actionDelete" />

• 子组件的点击事件保持原有写法即可（已包含参数传递）：

<q-btn @click="actionDelete(media.uuid)">Delete</q-btn>

优化TypeScript类型定义 #

为了让类型检查更严谨，可以给actionDelete属性指定更精确的类型，避免传入不符合要求的函数：

const props = defineProps({
  media: {
    type: Object as PropType<MediaItem>,
    required: true
  },
  actionDelete: {
    // 明确是接收string类型uuid参数、返回值为void的函数
    type: Function as PropType<(uuid: string) => void>,
    required: true
  }
});

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