使用辅助函数后出现Object is possibly 'undefined'.ts(2532)错误求助

TypeScript的类型窄化无法跨函数生效。直接写条件判断时，TS能在当前代码块里识别出data、data.pages、data.pages[0].results[0]都存在，自动把这些值的类型从可选（可能undefined）窄化为确定存在的类型。但把判断逻辑抽到辅助函数后，TS没办法追踪到函数内部的判断逻辑，只会把函数的返回值当成普通布尔值，无法关联到data的类型变化，所以仍然认为data可能是undefined，或者内部属性可能不存在，就会抛出Object is possibly 'undefined'的错误。

有两种可行的解决方式：

方式一：使用类型谓词（Type Predicate）修改辅助函数 #

把辅助函数的返回值从boolean改成类型谓词，告诉TS当函数返回true时，data的结构是完全符合我们需要的类型。

修改后的辅助函数代码：

// 先确保你有对应Movie类型定义，匹配results里的单个数据结构
interface Movie {
  overview: string;
  title: string;
  backdrop_path?: string;
}

const hasDataResults = (
  query: string,
  data: InfiniteData<Movies> | undefined
): data is InfiniteData<Movies> & { pages: [{ results: [Movie] }] } => {
  return !query && data && data.pages && data.pages[0]?.results[0];
};

这样当hasDataResults(query, data)返回true时，TS就会自动把data的类型窄化为我们定义的结构，后续访问data.pages[0].results[0]时就不会再报错。

方式二：让辅助函数直接返回目标数据对象 #

既然我们最终需要的是data.pages[0].results[0]这个对象，不如让辅助函数直接返回这个对象（不存在时返回null或undefined），这样既能完成判断，又能直接拿到可用的数据，避免重复访问嵌套属性。

修改后的辅助函数代码：

const getHeroData = (
  query: string,
  data: InfiniteData<Movies> | undefined
) => {
  if (!query && data && data.pages && data.pages[0]?.results[0]) {
    return data.pages[0].results[0];
  }
  return null;
};

然后在组件里这样使用：

const heroData = getHeroData(query, data);

// 渲染部分
{heroData && (
  <Hero
    text={heroData.overview}
    title={heroData.title}
    imgUrl={
      heroData.backdrop_path
        ? `${IMAGE_BASE_URL}${BACKDROP_SIZE}${heroData.backdrop_path}`
        : "./no_image.jpg"
    }
  />
)}

这种方式不仅解决了类型问题，还让代码更简洁，减少了重复的嵌套属性访问。

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