Vue3-ts报错：类型“never”上不存在属性“resetFields“

Vue3-ts报错：类型“never”上不存在属性“resetFields“

在 Vue3 项目中使用表单的时候，通常有验证环节，在 script 中：

const showModal = ref(false);
const isRegistering = ref(false); // 新增状态
const formRef = ref(null);
const formState = ref({
    username: '',
    password: '',
    repeatPassword: '' // 仅在注册时使用
});

const handleSubmit = () => {
    if (formRef.value) {
        formRef.value.validate((errors: any) => {
            if (!errors) {
                console.log('提交的数据', formState.value);
                // 在这里添加提交表单的逻辑
            }
        });
    } else {
        console.error('表单数据不存在');
    }
};

const handleReset = () => {
    if (formRef.value) {
        formRef.value.resetFields();
    } else {
        console.error('表单数据不存在');
    }
};

此时会出现报错：

类型“never”上不存在属性“resetFields“

问题原因

const formRef = ref(null);

此时formRef.value 的类型是 never ，要避免这个错误，将 ref 的初始值改为空即可。

解决方式

修改formRef

const formRef = ref();

完整代码（简单的注册登录组件）