Vue 3.2 <script setup>搭配TypeScript使用的两个异常问题咨询

问题1：'User' only refers to a type, but is being used as a value here. ts(2693)报错 #

报错原因 #

你当前使用的是Vue的运行时props声明写法，defineProps入参中的type字段是给Vue运行时做属性校验用的，需要传入实际的构造函数值（例如String、Number、Object等JS原生构造器）。而你从firebase/auth导入的User是TypeScript的纯类型，编译阶段就会被擦除，不存在对应的运行时值，因此TS会抛出将类型当作值使用的错误。

修复方案 #

推荐使用TypeScript专属的类型式props声明写法，直接用类型标注定义props，不需要写运行时校验配置：

<template>
  <div>Logged in as {{ user.uid }}</div>
</template>

<script setup lang="ts">
// 纯类型导入建议加上type前缀，避免编译后残留无效导入
import type { User } from "firebase/auth";

const props = defineProps<{
  user: User
}>();
</script>

如果你需要保留运行时校验的写法，也可以通过类型断言指定user的TS类型：

defineProps({
  user: {
    type: Object,
    required: true,
    // 可选：添加自定义运行时校验逻辑
    validator: (val: unknown): val is User => {
      return !!val && typeof val === 'object' && 'uid' in val
    }
  }
})

问题2：移除defineProps导入后报'defineProps' is not defined错误 #

报错原因 #

和版本、开发环境配置有关，常见原因如下：

• Vue版本低于3.2.11：该版本才正式把defineProps等<script setup>专属的编译器宏设为全局可用，不需要手动导入
• IDE的Volar插件版本过低/未正确配置：VSCode等IDE需要安装Volar插件并启用「Take Over模式」才能正确识别编译器宏的全局类型，否则会误报未定义
• tsconfig.json配置不符合要求：<script setup>需要开启compilerOptions.isolatedModules = true，如果是Vite项目还要确保根目录的env.d.ts中包含/// <reference types="vite/client" />类型引入，旧版本项目可能还需要手动添加编译器宏的全局类型声明

修复方案 #

1. 先升级Vue到3.2.11以上的稳定版本
2. 升级IDE的Volar插件到最新版，启用Take Over模式，禁用内置的Vetur插件
3. 检查tsconfig.json配置，确保isolatedModules设为true，类型包含配置正确

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