Next.js+TypeScript的getServerSideProps如何设置类型解决query报错？

Next.js 中getServerSideProps的context.query返回的所有参数类型默认为string | string[] | undefined，规则如下：

• 参数未传递时为undefined
• 同一个参数重复传值（例：?genre=action&genre=comedy）时为字符串数组
• 正常单次传值时为字符串
  而你的requests配置对象的键只能是字符串类型，直接用genre作为索引访问requests时，类型不符合就会触发题中的两个报错。

先对genre参数做类型转换和合法性校验，再作为索引访问requests，修改后的getServerSideProps代码如下：

export const getServerSideProps: GetServerSideProps = async (context) => {
  const rawGenre = context.query.genre 
  // 统一处理参数为字符串类型或undefined
  let genre: string | undefined
  if (typeof rawGenre === 'string') {
    genre = rawGenre
  } else if (Array.isArray(rawGenre)) {
    // 数组场景下取第一个值，可根据自身业务需求调整逻辑
    genre = rawGenre[0]
  }

  // 校验genre是否是requests的合法键
  const targetUrl = genre && genre in requests
    ? requests[genre as keyof typeof requests].url
    : requests.fetchTopRated.url

  const response = await fetch(
    `https://api.themoviedb.org/3${targetUrl}`
  );

  const data = await response.json();

  return {
    props: { results: data.results },
  };
};

如果想要完全避免类型断言，可以提前给requests定义明确的类型：

// utils/requests.ts 中添加类型定义
export const requestKeys = {
  fetchTopRated: 'fetchTopRated',
  // 补充你所有定义的requests键
} as const

export type RequestKey = keyof typeof requestKeys

// 定义requests的类型
const requests: Record<RequestKey, { url: string }> = {
  fetchTopRated: { url: '/movie/top_rated' },
  // 其余配置项
}
export default requests

后续就可以配合类型守卫实现完全的类型安全，不需要额外断言。

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