React中布尔与对象联合类型的TypeScript错误解决

你的问题根源在于LoaderArgs是boolean与包含showLoader属性的对象的联合类型——当loader值为false时，它本身就是布尔类型，自然没有showLoader属性，TypeScript的严格类型检查会拦截这种非法访问。以下是几种可行的解决方式：

1. 使用类型守卫（推荐） #

编写一个类型守卫函数，帮助TypeScript准确判断当前loader的类型：

type LoaderArgs = boolean | { showLoader: boolean; position?: string };

// 类型守卫函数
function isLoaderConfig(loader: LoaderArgs): loader is { showLoader: boolean; position?: string } {
  return typeof loader === 'object' && loader !== null;
}

使用时通过类型守卫区分处理：

{(isLoaderConfig(loader) ? loader.showLoader : loader) && <Loader />}

2. 直接在条件判断中区分类型 #

不用额外写函数，直接在JSX的判断逻辑里做类型区分：

{(typeof loader === 'boolean' ? loader : loader?.showLoader) && <Loader />}

这种方式更简洁，TypeScript会根据typeof判断自动推断后续的属性访问合法性。

3. 重构LoaderArgs类型（更严谨的方案） #

避免布尔值与对象的混合联合，统一使用对象类型，把布尔值作为快捷场景做封装：

// 统一对象类型，明确所有属性
type LoaderArgs = { showLoader: boolean; position?: string };

// useState初始化时使用对象
const [loader, setLoader] = useState<LoaderArgs>({ showLoader: false });

// 封装快捷方法处理布尔值场景
const toggleLoader = (visible: boolean) => {
  setLoader({ showLoader: visible });
};

这种方式让类型定义更清晰，后续维护时不会出现联合类型的歧义问题。

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