Next.js+SWR调用/api/projects/[slug]未返回响应导致请求停滞怎么解决

问题根因 #

API resolved without sending a response 报错和你前端的getServerSideProps、SWR配置没有关联，问题出在你/api/projects/[slug] 对应的API路由代码：逻辑执行完成后没有给客户端返回任何响应就结束了进程，才会触发这个请求停滞的报错。

解决步骤 #

1. 修正API路由代码（最核心） #

打开你/pages/api/projects/[slug].js（Pages Router）或者/app/api/projects/[slug]/route.js（App Router）文件，确保所有逻辑分支都有明确的返回值：

• Pages Router写法参考：

export default async function handler(req, res) {
  // 校验请求方法的分支必须加return，避免逻辑继续向下执行
  if (req.method !== 'GET') {
    return res.status(405).json({ msg: '请求方法不允许' })
  }
  try {
    const { slug } = req.query
    // 这里替换成你自己的业务查询逻辑
    const project = await ProjectModel.findOne({ slug: slug })
    return res.status(200).json({ data: { project } })
  } catch (err) {
    // 错误捕获分支也必须返回响应
    return res.status(500).json({ msg: '查询失败', error: err.message })
  }
}

• App Router写法参考：

export async function GET(request, { params }) {
  try {
    const { slug } = params
    const project = await ProjectModel.findOne({ slug: slug })
    return Response.json({ data: { project } }, { status: 200 })
  } catch (err) {
    return Response.json({ msg: '查询失败' }, { status: 500 })
  }
}

2. 前端SWR代码优化（非必须，可避免后续问题） #

你当前额外维护的projectData和loading状态是冗余的，SWR本身已经内置了加载状态、数据返回的处理，可以直接简化代码：

export default function Project({ params }) {
  const { slug } = params;
  // 直接用相对路径请求接口即可，不需要写完整域名
  const { data, isLoading } = useSWR(`/api/projects/${slug}`);

  if (isLoading) return <div>加载中...</div>
  const projectData = data?.data?.project || []
  // 后续业务逻辑直接使用projectData即可
  // ......
}

内容的提问来源于stack exchange，提问作者Harsha M V