TypeScript报错：类型'User'不存在'roles'属性，求解决方案

问题原因 #

Meteor官方提供的User类型默认没有roles字段，你的项目给用户对象扩展了该属性后，TypeScript无法识别自定义字段，因此抛出错误。同时注意你原代码的逻辑问题：若roles是数组类型，["admin"].includes(Meteor?.user()?.roles)这行判断永远不成立，应该改为检查roles数组是否包含"admin"。

以下是几种可行的解决方法：

1. 扩展Meteor的User类型声明（推荐长期方案） #

在项目中创建一个类型声明文件（比如types/meteor.d.ts），通过TypeScript的接口合并特性扩展User类型：

declare module "meteor/meteor" {
  interface User {
    roles?: string[]; // 根据实际数据结构调整，若为单个角色可改为string类型
  }
}

随后确保tsconfig.json的include字段包含这个类型文件，示例：

{
  "include": [
    "src/**/*",
    "types/**/*"
  ]
}

这样TypeScript就能全局识别用户对象的roles属性。

2. 使用类型断言（临时应急方案） #

若不想修改全局类型，可在使用时通过类型断言告知TypeScript当前用户对象包含roles属性：

const currentUser = Meteor.user() as User & { roles?: string[] };
{currentUser && currentUser.roles && currentUser.roles.includes("admin") && 
  <Button onClick={handleClick}>Go to SMS Room</Button>
}

3. 自定义类型守卫（更安全的类型推断） #

编写一个类型守卫函数，帮助TypeScript判断用户对象是否包含合法的roles属性：

function isAdminUser(user: User | null): user is User & { roles: string[] } {
  return !!user && Array.isArray(user.roles) && user.roles.includes("admin");
}

{isAdminUser(Meteor.user()) && 
  <Button onClick={handleClick}>Go to SMS Room</Button>
}

这种方式既解决了类型错误，又将权限判断逻辑封装起来，代码更清晰。

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