Vue+TypeScript+Firebase中如何定义含ref类型Firebase User对象的返回类型

错误原因说明 #

• 第一种写法声明返回类型为Ref<null | User>，但你实际返回的是包含user属性的对象，而非直接返回ref实例，类型不匹配
• 第二种写法的对象类型语法错误，没有指定对应类型的属性名

正确实现方案 #

方案1：直接声明返回对象结构

直接在返回类型位置写清楚对象的属性和对应类型即可：

const getUser = (): { user: Ref<null | User> } => {
  return { user };
};

方案2：提前定义返回类型别名（更易维护）

如果返回结构比较复杂，或者后续有多处用到这个类型，可以先抽离类型别名：

// 先定义返回值的类型
type UserModuleReturn = {
  user: Ref<null | User>
}

const getUser = (): UserModuleReturn => {
  return { user };
};

额外说明 #

你当前的代码是把user实例和onAuthStateChanged监听写在了函数外层，属于单例模式，整个应用共用同一个user响应式实例。如果需要每次调用getUser都生成独立的实例，把这部分逻辑挪到getUser函数内部即可。

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