React中如何根据Props合法调用权限受限的自定义Hooks？

方案1：拆分组件（最推荐） #

把不同角色对应的逻辑拆分为独立子组件，父组件根据role props渲染对应子组件。每个子组件内部无条件调用专属Hook，完全符合React Hook规则，同时避免触发权限错误。

代码示例：

// 管理员专属子组件
const AdminComponent = () => {
  const { data, loading } = useAdminService(); // 仅管理员Hook，无条件调用

  if (loading) return <div>加载中...</div>;
  return <div>管理员数据：{data}</div>;
};

// 普通用户专属子组件
const UserComponent = () => {
  const { data, loading } = useUserService(); // 仅普通用户Hook，无条件调用

  if (loading) return <div>加载中...</div>;
  return <div>用户数据：{data}</div>;
};

// 父组件
const ParentComponent = ({ role }: { role: 'admin' | 'user' }) => {
  switch (role) {
    case 'admin':
      return <AdminComponent />;
    case 'user':
      return <UserComponent />;
    default:
      return <div>无权限访问</div>;
  }
};

方案2：用条件渲染包裹Hook调用（紧凑写法） #

如果不想拆分子组件，可以把Hook调用和渲染逻辑封装为立即执行函数表达式（IIFE），在父组件的条件块内渲染。本质是在独立上下文里无条件调用Hook，符合规则。

代码示例：

const ParentComponent = ({ role }: { role: 'admin' | 'user' }) => {
  return (
    <>
      {role === 'admin' && (
        <>{(() => {
          const { data, loading } = useAdminService();
          if (loading) return <div>加载中...</div>;
          return <div>管理员数据：{data}</div>;
        })()}</>
      )}
      {role === 'user' && (
        <>{(() => {
          const { data, loading } = useUserService();
          if (loading) return <div>加载中...</div>;
          return <div>用户数据：{data}</div>;
        })()}</>
      )}
      {!['admin', 'user'].includes(role) && <div>无权限访问</div>}
    </>
  );
};

方案3：封装通用Hook统一处理（需直接操作API） #

若两个Hook的返回结构一致，且你能直接访问底层API请求函数，可以封装一个顶层Hook，内部根据角色条件执行不同请求逻辑（注意：这里不是条件调用Hook，而是在Hook的副作用里条件执行请求）。

代码示例：

// 封装通用角色服务Hook
const useRoleBasedService = (role: 'admin' | 'user') => {
  const [data, setData] = useState<unknown>(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    const fetchData = async () => {
      setLoading(true);
      try {
        const res = role === 'admin' 
          ? await adminApi.fetchExclusiveData() 
          : await userApi.fetchExclusiveData();
        setData(res);
      } catch (err) {
        console.error('请求失败：', err);
      } finally {
        setLoading(false);
      }
    };

    fetchData();
  }, [role]);

  return { data, loading };
};

// 父组件使用
const ParentComponent = ({ role }: { role: 'admin' | 'user' }) => {
  const { data, loading } = useRoleBasedService(role); // 无条件调用通用Hook

  if (loading) return <div>加载中...</div>;
  return <div>{role === 'admin' ? '管理员' : '用户'}专属数据：{data}</div>;
};

内容的提问来源于stack exchange，提问作者Fred B.