如何在Pinia Store与Sidebase/nuxt-auth中使用自定义TypeScript接口？

问题根源 #

useAuth()返回的data是Session会话对象（类型为SessionData | null | undefined），并非直接的User实体。直接将其赋值给User类型的ref，会触发类型不兼容错误。

两种可行解决方案 #

方案一：安全取值+类型断言

在赋值逻辑中做存在性检查，通过类型断言明确告知TypeScript会话中的用户数据符合你的User接口：

首先修正ref的类型（允许初始值为null）：

const user = ref<User | null>(null)

然后修改登录函数中的赋值逻辑：

async function loginUser(credentials: { emailAddress: string; password: string }) {
  loading.value = true
  try {
    await signIn(
      { email_address: credentials.emailAddress, password: credentials.password },
      { callbackUrl: '/shows' }
    )
    // 先确认会话数据存在，再取出user字段并断言类型
    if (data.value) {
      user.value = data.value.user as User
    }
    loading.value = false
    return 200
  } catch (e: any) {
    loading.value = false
    return e.status
  }
}

方案二：扩展nuxt-auth的Session类型（全局生效，更优雅）

通过类型声明文件扩展nuxt-auth的Session类型，让TypeScript全局识别会话中的user字段就是你定义的User类型，无需每次手动断言：

1. 在项目根目录创建types/nuxt-auth.d.ts文件，内容如下：

import { User } from './User.interface'

declare module '@sidebase/nuxt-auth' {
  interface Session {
    user: User
  }
}

2. 此时data.value?.user会自动推断为User类型，登录函数中的赋值逻辑可简化为：

if (data.value) {
  user.value = data.value.user
}

3. ref的类型依然保持：

const user = ref<User | null>(null)

注意事项 #

• 确保后端/user接口返回的数据结构与你的User接口完全一致，否则类型断言可能会掩盖潜在的数据不匹配问题。
• 避免使用any类型，它会跳过TypeScript的类型检查，失去类型系统的保护意义。

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