Vue.js组件使用v-model时出现never类型赋值错误如何解决

云原生阿岚

2026-7-12

问题描述

组件props声明如下：

props: {
  modelValue: {
    type: [Object, null] as PropType<Filter | null>,
    default: null,
    required: true,
  },
}

使用实例化的Filter对象调用组件时，VSCode提示ESLint错误：

Argument of type '{ modelValue: ...' is not assignable to parameter of type 'never'.

组件调用代码：

<filter v-model="myFilter" />

父组件setup逻辑：

setup() {
    const myFilter = ref<Filter | null>(null);
}

解决方法

修正props类型声明
将type: [Object, null]改为type: Object，因为PropType<Filter | null>已经包含了null类型，数组写法会干扰TypeScript的类型推断：
```
props: {
  modelValue: {
    type: Object as PropType<Filter | null>,
    default: null,
    required: true,
  },
}
```
确保Filter类型定义正确
检查Filter类/接口是否正确导出，实例化的对象是否严格符合类型结构。比如如果是类，确认导入路径正确，实例化时没有参数错误；如果是接口，确保对象的属性和方法完全匹配。

确认父组件ref的赋值逻辑
当给myFilter赋值时，确保是Filter的有效实例：

setup() {
  const myFilter = ref<Filter | null>(new Filter()); // 直接实例化或后续正确赋值
  return { myFilter };
}

更新Vue类型依赖
若使用Vue 3，确保@vue/runtime-core、vue等包的版本一致且为最新，避免旧版本类型定义的bug。
临时忽略ESLint错误（不推荐长期使用）
若以上方法无效，可在组件调用处添加注释跳过检查：
```

<filter v-model="myFilter" />
```