如何在getServerSideProps中处理RTK Query错误？

核心解决思路 #

在getServerSideProps中通过错误捕获处理不存在的slug场景，直接返回Next.js的404状态或自定义错误页面，避免RTK Query的错误抛出导致页面崩溃。

具体修改步骤 #

1. 用try/catch包裹RTK Query查询逻辑
   调用RTK Query的查询方法时，使用unwrap()拆包响应（成功返回数据，失败直接抛出错误），再通过try/catch捕获异常。
2. 判断错误类型返回对应状态
   捕获到错误后，根据后端返回的状态码（比如404），返回{ notFound: true }让Next.js自动渲染404页面；其他错误可返回自定义错误信息。

修改后的代码示例 #

export async function getServerSideProps(context) {
  const { slug } = context.params;

  try {
    // 调用RTK Query接口并拆包响应
    const { data } = await api.endpoints.getPostsBySlug.initiate(slug).unwrap();
    return {
      props: { post: data }
    };
  } catch (err) {
    // 检测是否为404错误（根据后端实际返回调整判断逻辑）
    if (err.status === 404) {
      return { notFound: true };
    }
    // 其他错误场景返回自定义错误信息
    return {
      props: { error: "加载内容失败，请稍后重试" }
    };
  }
}

额外优化建议 #

• 在RTK Query的baseQuery中可以统一配置错误拦截，比如将后端返回的404、500等状态码转换为可识别的错误对象，方便在业务代码中判断。
• 前端页面中可接收error props，展示友好的错误提示，提升用户体验。

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