使用Vue 3和带有Setup语法（TypeScript）的合成API，我想在一个组件内声明一个引用，详细说明用户的信息。

const userData: Ref<User | undefined> = ref({} as User)

如果我使用这个语法，当我想访问if时，我必须一直在userData后面放一个“？”，因为数据也可能是未定义的。

<template>
  <div class="pa-4 pt-1">
    <HeaderPage :title="`Administrateurs - ${userData?.email}`" />
    aaaa {{ 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 { Ref } from 'vue'
import type { User } from '@/api/types/user.interfaces'

const route = useRoute()

const loading = ref(false)
const userData: Ref<User | null> = ref({} as User)

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

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

EDIT尝试了以下操作：

const userData: Ref<User> = ref()

但我得到了