如何在TypeScript中为React Context联合类型指定确切类型

你的问题核心是PageContextState是两种页面Props的联合类型，TypeScript无法自动推断当前页面对应的具体类型，导致直接注解或断言报错。以下是几种可行的解决方式：

1. 用类型守卫收窄类型 #

定义一个类型守卫函数，通过判断特征属性确认当前Context的类型，让TypeScript自动完成类型推断：

// 类型守卫函数
function isFinderPageProps(
  props: PageContextState
): props is FinderPageServerSideProps {
  // 检查Finder页特有的属性是否存在
  return 'siteOptions' in props && 'region' in props && 'initialTab' in props;
}

// 使用示例
const pageContext = useContext(PageContext);
if (isFinderPageProps(pageContext)) {
  // 此处pageContext会被TypeScript推断为FinderPageServerSideProps
  console.log(pageContext.siteOptions);
}

2. 明确的类型断言（仅在确定页面类型时使用） #

如果能保证当前代码只在搜索页（Finder Page）执行，可以直接用类型断言修正类型：

// 方式1：直接断言整个Context对象
const pageContext = useContext(PageContext) as FinderPageServerSideProps;

// 方式2：解构时断言
const { pageContext } = useContext(PageContext) as { pageContext: FinderPageServerSideProps };

之前的as any as ...没生效可能是写法问题，直接断言到目标类型即可。

3. 优化类型定义（更可靠的方案） #

给两种页面Props添加一个标识字段（比如pageType），让类型判断更清晰、不易出错：

// 更新类型定义
type FinderPageServerSideProps = {
  pageType: 'finder';
  siteOptions: /* 你的具体类型 */;
  region: /* 你的具体类型 */;
  initialTab: /* 你的具体类型 */;
};

type HomePageServerSideProps = {
  pageType: 'home';
  description: string;
};

export type PageContextState = FinderPageServerSideProps | HomePageServerSideProps;

// 对应的类型守卫
function isFinderPageProps(props: PageContextState): props is FinderPageServerSideProps {
  return props.pageType === 'finder';
}

这种方式通过明确的标识字段判断类型，比依赖属性存在性更可靠，也更易维护。

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