Nuxt 3中使用TypeScript时useFetch数据可能为null的错误解决

问题原因 #

你已经通过throw createError处理了user.value为null的情况，但TypeScript的控制流分析没能识别到抛出错误后后续代码不会执行，所以依然认为user.value可能为null，导致报错。

具体解决方案 #

1. 非空断言（最直接）

在访问user.value时加上!，明确告诉TypeScript这个值一定不为null：

<script setup lang="ts">
interface User {
  login: boolean;
  isEditor: boolean;
  topics: any[]; // 根据实际数据结构定义更具体的类型
}

const { data: user } = await useFetch<User>('/api/user/info', {
  headers: useRequestHeaders(['cookie'])
});

if (!user.value)
  throw createError('Problems when fetching current user!');

// 用!断言user.value不为null
const myComputed = computed(() => !user.value!.login);
</script>

2. 提前提取非空值

如果不想到处加!，可以提前把user.value提取为一个非空变量：

<script setup lang="ts">
interface User {
  login: boolean;
  isEditor: boolean;
  topics: any[];
}

const { data: user } = await useFetch<User>('/api/user/info', {
  headers: useRequestHeaders(['cookie'])
});

const userData = user.value;
if (!userData)
  throw createError('Problems when fetching current user!');

// 直接用userData，类型已经是User而非null
const myComputed = computed(() => !userData.login);
</script>

3. 解决template中的报错

template里可以通过v-if先判断user是否存在，避免类型报错：

<template>
  <div v-if="user">
    <!-- 这里访问user.login不会报错 -->
    <p>{{ user.login ? '已登录' : '未登录' }}</p>
  </div>
</template>

补充说明 #

定义User接口不仅能解决类型报错，还能获得TS的代码提示，建议根据API返回的实际结构完善接口类型（比如把topics的类型定义得更具体）。

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