React+TypeScript组件复用：求避免非Admin角色运行时异常的替代方案

问题背景 #

我用TypeScript和React实现了一个组件，它会调用需要Admin权限的Web API获取数据——如果当前用户是Member等非Admin角色，API调用会直接抛出异常。

最初的组件代码如下：

export const ShowDataComponent = () => {
  const [data, setData] = useState<Data>(undefined);
  useEffect(() => {
    fetchDataArrowAccessAdminUser().then((data) => setData(data));
  }, []);

  return <> {data && <div>data</div>} </>;
};

这个写法的问题很明显：如果其他开发者把组件放到非Admin可见的页面，测试阶段用Admin账号测不出来问题，但上线后Member用户访问必现运行时异常。

我尝试过给组件加一个userRole: "admin"的props来做编译时约束：

type Props = {
  userRole: "admin";
};

export const ShowDataComponent = (props: Props) => {
  // ...组件逻辑不变
};

但这个userRole完全是冗余的——组件内部根本不用它，只是用来触发编译错误，提醒开发者组件的使用场景。现在想找更优雅的替代方案。

替代方案 #

1. 封装权限控制高阶组件(HOC) #

这个方案既能做编译时约束，又能处理运行时权限判断，彻底解决冗余props的问题。

// 定义HOC的通用类型
type WithAdminProps = {
  userRole: "admin" | "member";
};

const withAdminOnly = <P extends object>(Component: React.ComponentType<P>) => {
  return (props: P & WithAdminProps) => {
    const { userRole, ...restProps } = props;
    // 非Admin角色直接返回空或者权限提示组件
    if (userRole !== "admin") {
      return <div>无权限访问此内容</div>;
    }
    // 权限通过时渲染原组件，无需传递冗余props
    return <Component {...restProps as P} />;
  };
};

// 用HOC包装原组件
export const ShowDataComponent = withAdminOnly(() => {
  const [data, setData] = useState<Data>(undefined);
  useEffect(() => {
    fetchDataArrowAccessAdminUser().then((data) => setData(data));
  }, []);

  return <> {data && <div>{data}</div>} </>;
});

使用方式：

// 必须传递userRole，否则编译报错
<ShowDataComponent userRole={currentUser.role} />

这个方案的优势是：编译时强制要求传入角色，运行时自动处理权限逻辑，原组件完全不需要关心权限相关代码。

2. 利用Context+类型断言做编译时约束 #

如果项目里已经通过React Context全局管理用户角色，可以用这种方式，不需要额外传递props：

// 先定义用户角色Context
type UserContextType = {
  userRole: "admin" | "member";
};
const UserContext = React.createContext<UserContextType | undefined>(undefined);

// 组件实现
export const ShowDataComponent = () => {
  const userContext = useContext(UserContext);
  // 编译时断言当前上下文的用户角色必须是Admin，否则报错
  const { userRole } = userContext as { userRole: "admin" };

  const [data, setData] = useState<Data>(undefined);
  useEffect(() => {
    fetchDataArrowAccessAdminUser().then((data) => setData(data));
  }, []);

  return <> {data && <div>{data}</div>} </>;
};

使用约束：
只有在已经提供了Admin角色Context的组件树中，才能正常使用ShowDataComponent——如果在Member角色的上下文里用，编译阶段会因为类型断言失败报错。

3. 轻量方案：类型标记+注释提示 #

如果不想引入HOC或Context，可以用类型标记结合注释的方式，既避免冗余props，又能提醒开发者注意使用场景：

/**
 * ⚠️ 仅允许在Admin角色可见的页面中使用！
 * 组件内部调用的API仅对Admin开放，非Admin用户访问会触发异常
 */
export const ShowDataComponent = () => {
  const [data, setData] = useState<Data>(undefined);
  useEffect(() => {
    fetchDataArrowAccessAdminUser().then((data) => setData(data));
  }, []);

  return <> {data && <div>{data}</div>} </>;
};

// 定义一个仅用于类型约束的标记
type AdminOnlyComponent = React.ComponentType & {
  __adminOnly: never; // 无运行时意义，仅作类型标识
};

// 给组件打上Admin专属标记
export const AdminOnlyShowDataComponent = ShowDataComponent as AdminOnlyComponent;

使用方式：
推荐导出AdminOnlyShowDataComponent给其他开发者使用，这个类型标记可以配合项目中的角色类型做进一步约束，比如在页面级判断角色后再渲染：

{currentUser.role === "admin" && <AdminOnlyShowDataComponent />}

虽然这个方案没有强制编译报错，但清晰的注释和类型标记能有效降低误用概率，同时完全没有冗余props。

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