Vue3 Setup组合式API：如何声明对象Ref的TypeScript类型

你当前的核心问题是：直接声明Ref<User>时，ref()的初始值是undefined，和User类型不匹配导致报错；而声明Ref<User | undefined/null>又得每次用?访问属性。下面给你几个实用的解决办法：

方法一：结合加载状态做条件渲染（推荐） #

把userData初始化为null，通过loading状态控制模板渲染，确保访问属性时数据已经加载完成，这样就不用加可选链：

修改后代码 #

<template>
  <div class="pa-4 pt-1">
    <!-- 数据加载完成后再渲染需要userData属性的组件 -->
    <HeaderPage 
      v-if="!loading" 
      :title="`Administrateurs - ${userData.email}`" 
    />
    <!-- 加载中状态提示 -->
    <div v-else>加载中...</div>
    {{ userData }}
  </div>
</template>

<script setup lang="ts">
import HeaderPage from '@/components/pages/Header.vue'
import { onMounted, ref } from 'vue'
import UserService from '@/api/modules/user'
import { useRoute } from 'vue-router'

import type { User } from '@/api/types/user.interfaces'

const route = useRoute()

// 初始设为true，确保一开始进入加载状态
const loading = ref(true)
// 用ref泛型指定类型，初始值为null
const userData = ref<User | null>(null)

onMounted(() => {
  fetchUserData()
})

function fetchUserData() {
  UserService.getUser(route.params.userId as string).then((res) => {
    userData.value = res
    loading.value = false
  })
}
</script>

方法二：给Ref设置符合User类型的初始值 #

如果你的User接口属性都能设置合理的默认值，可以直接初始化一个完整的User对象，这样userData的类型就是Ref<User>，不用加可选链：

// 假设User接口包含id、email等属性
const userData = ref<User>({
  id: '',
  email: '',
  username: '',
  // 其他User属性的默认值
})

后续接口返回数据后，直接覆盖userData.value即可。

方法三：非空断言（谨慎使用） #

如果你能100%确保在访问userData属性时，数据已经加载完成，可以用非空断言!跳过类型检查，但这种方式有风险（比如请求失败时会报错）：

// 声明时允许undefined
const userData = ref<User | undefined>()

// 脚本中访问时
userData.value!.email

// 模板里没法用!，还是得配合v-if判断
<HeaderPage v-if="userData" :title="`Administrateurs - ${userData.email}`" />

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