TypeScript调用Firebase云函数返回data为unknown类型报错如何解决

Firebase 提供的 httpsCallable 方法默认没有绑定入参和返回值的类型，TypeScript 无法感知云函数返回的数据结构，因此返回结果的 data 属性会被标记为 unknown 类型，TypeScript 不允许直接读取未知类型的属性，就会抛出你遇到的报错。

分两步处理即可，兼顾编译时类型校验和运行时安全：

第一步：定义对应类型 #

先根据你的云函数入参规则和返回结构，声明对应的类型：

// 云函数入参结构
interface GetUserByEmailParams {
  email: string
}

// 云函数返回的用户信息结构
interface UserInfo {
  id: string
  // 你云函数返回的其他字段都可以在这里补充声明
  // 比如 username?: string、createTime?: number 等
}

第二步：给httpsCallable绑定泛型 #

httpsCallable 支持传入两个泛型参数，第一个是入参结构，第二个是返回的data属性的结构，绑定后TypeScript就能自动推导类型：

// 绑定泛型后该方法的入参、返回值都会有类型提示和校验
const getUserByEmail = httpsCallable<GetUserByEmailParams, UserInfo>(functions, 'getUserByEmail')
const callResult = await getUserByEmail({
  email: email,
})

// 此时 callResult.data 已经是 UserInfo 类型，可直接读取属性无报错
const userId = callResult.data.id

可选：增加运行时类型校验 #

上面的泛型仅在编译阶段生效，如果你需要保障运行时返回数据的结构符合预期，可以增加类型守卫做校验：

// 类型守卫函数，运行时判断数据是否符合UserInfo结构
function isUserInfo(data: unknown): data is UserInfo {
  return typeof data === 'object' 
    && data !== null 
    && 'id' in data 
    && typeof (data as UserInfo).id === 'string'
}

// 调用后做校验
const callResult = await getUserByEmail({ email })
if (!isUserInfo(callResult.data)) {
  throw new Error('用户信息接口返回格式异常')
}
// 经过校验后，callResult.data的类型会被TypeScript自动收窄为UserInfo
const user = callResult.data

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