如何修复React-TypeScript中“This expression is not callable”错误

错误原因 #

你遇到的TS2349错误，核心是作用域命名冲突：
在AuthContextProvider组件内部，你声明了一个名为isAdmin的状态变量（const [isAdmin, setIsAdmin] = useState(false);），它的优先级高于外部导入的同名isAdmin函数。当你在useEffect里调用isAdmin("ROLE_ADMIN", roles)时，实际访问的是这个布尔类型的状态变量，而非你写的检查函数，所以TypeScript提示布尔值无法被调用。

解决方案 #

方案1：重命名状态变量 #

把组件内的isAdmin状态变量改成其他名称，比如isAdminUser，避免和导入的函数重名：

// 修改状态声明
const [isAdminUser, setIsAdminUser] = useState(false);

// 同步修改contextValues里的字段，保持对外暴露的字段名不变，不影响其他组件使用
const contextValues = {
  isAdmin: isAdminUser,
  isLoggedIn,
  username,
  token,
  email,
  login,
  logout,
};

方案2：重命名导入的函数 #

在导入isAdmin函数时，给它起一个别名，避免和内部状态冲突：

// 导入时重命名（替换为你的实际文件路径）
import isAdminChecker from './utils/isAdmin';

// 在useEffect里调用别名函数
let isAdminTest: boolean = isAdminChecker("ROLE_ADMIN", roles);

额外优化：简化isAdmin函数 #

你的isAdmin函数可以用数组原生的includes方法简化，逻辑更简洁高效：

const isAdmin = (targetRole: string, roles: string[]) => {
  return roles.includes(targetRole);
};
export default isAdmin;

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