URLSearchParams参数类型不兼容报错求助（TypeScript）

问题描述 #

执行以下通过刷新令牌获取访问令牌的代码时，URLSearchParams持续抛出类型错误：

const getAccessToken = async () => {
  const response = await fetch(TOKEN_ENDPOINT, {
    method: 'POST',
    headers: {
      Authorization: `Basic ${basic}`,
      'Content-Type': 'application/x-www-form-urlencoded',
    },
    body: new URLSearchParams({
      grant_type: 'refresh_token',
      refresh_token,
    }),
  })
  return response.json()
}

其中refresh_token是环境变量定义的常量，报错信息如下：

Argument of type '{ grant_type: string; refresh_token: string | undefined; }' is not assignable to parameter of type 'string | string[][] | Record<string, string> | URLSearchParams | undefined'.
  Type '{ grant_type: string; refresh_token: string | undefined; }' is not assignable to type 'undefined'.ts(2345)

错误原因 #

TypeScript检测到refresh_token的类型为string | undefined，但URLSearchParams构造函数要求传入的对象值必须是确定的string类型，不允许出现undefined。这是因为环境变量可能未正确加载，导致refresh_token存在未定义的可能性。

解决方案 #

方案1：非空断言（确定环境变量已配置时使用） #

如果能保证refresh_token一定存在（比如环境变量已正确设置），可以用非空断言!告诉TypeScript该值不会是undefined：

const getAccessToken = async () => {
  const response = await fetch(TOKEN_ENDPOINT, {
    method: 'POST',
    headers: {
      Authorization: `Basic ${basic}`,
      'Content-Type': 'application/x-www-form-urlencoded',
    },
    body: new URLSearchParams({
      grant_type: 'refresh_token',
      refresh_token: refresh_token!,
    }),
  })
  return response.json()
}

方案2：提前检查并抛出错误 #

在执行请求前检查refresh_token是否存在，不存在则主动抛出错误，避免后续类型问题：

const getAccessToken = async () => {
  if (!refresh_token) {
    throw new Error('refresh_token 未定义，请检查环境变量配置')
  }
  const response = await fetch(TOKEN_ENDPOINT, {
    method: 'POST',
    headers: {
      Authorization: `Basic ${basic}`,
      'Content-Type': 'application/x-www-form-urlencoded',
    },
    body: new URLSearchParams({
      grant_type: 'refresh_token',
      refresh_token,
    }),
  })
  return response.json()
}

方案3：设置默认值（仅当API允许空值时使用） #

如果目标API接受空的refresh_token参数，可以给refresh_token设置空字符串作为默认值：

const getAccessToken = async () => {
  const response = await fetch(TOKEN_ENDPOINT, {
    method: 'POST',
    headers: {
      Authorization: `Basic ${basic}`,
      'Content-Type': 'application/x-www-form-urlencoded',
    },
    body: new URLSearchParams({
      grant_type: 'refresh_token',
      refresh_token: refresh_token || '',
    }),
  })
  return response.json()
}

注意事项 #

• 非空断言需谨慎使用，若实际运行时refresh_token为undefined，会导致请求参数异常
• 优先推荐方案2，能提前暴露配置问题，避免后续请求失败
• 方案3仅适用于API明确允许空refresh_token的场景，否则会触发API报错

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