Next.js中如何在getInitialProps根据query参数请求不同接口

• 类型不匹配错误：Next.js 传入 getInitialProps 的 query 是ParsedUrlQuery类型的对象，存储所有URL查询参数的键值对，不是字符串格式的查询串，所以直接和'legal-person'做相等判断必然不成立，触发类型报错。对于/?legal-person这类无参数值的查询串，query对象中会存在legal-person键，值为空字符串，直接判断该键是否存在即可。
• 变量作用域错误：你在if/else块内用const声明的initialLoansJson是块级作用域变量，外层return语句无法访问，运行时会抛出变量未定义的错误。

CompareLoans.getInitialProps = async ({query}) => {
  try {
    // 并行请求无依赖的接口，提升性能
    const [loanTypesRes, initialLoansRes] = await Promise.all([
      fetch(`${process.env.BFF_API}/api/loan-types/`),
      // 根据参数判断请求地址，减少重复代码
      fetch(`${process.env.BFF_API}/api/${'legal-person' in query ? 'loans-legal-person' : 'loans'}/initial`)
    ])

    const [loanTypes, initialLoans] = await Promise.all([
      loanTypesRes.json(),
      initialLoansRes.json()
    ])

    return { loanTypes, initialLoans }
  } catch (err) {
    // 可根据业务需要添加错误处理逻辑，比如返回错误状态、兜底数据等
    console.error('接口请求失败：', err)
    return { loanTypes: [], initialLoans: [] }
  }
}

• 用'legal-person' in query判断参数是否存在，适配无值的查询参数场景，符合Next.js的query参数取值规则
• 无依赖的接口用Promise.all并行发起请求，相比串行请求能减少整体等待时间，提升页面加载速度
• 抽离重复的fetch、json序列化逻辑，减少冗余代码，后期修改接口规则时只需调整一处
• 增加错误捕获逻辑，避免接口报错导致页面直接崩溃，可根据业务场景自定义兜底数据
• 变量命名简化，避免冗余的Res、Json后缀，保持代码简洁易读

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