Next.js API路由返回数据无法读取？如何获取API响应数据

核心原因 #

fetch API返回的是Response流对象，而非直接的JSON数据，必须调用.json()方法异步解析才能拿到服务端返回的内容。此外还要确保API路由的返回格式正确，并做好错误处理。

第一步：确认API路由的正确返回 #

先确保你的API路由确实正确返回了JSON格式数据：

情况1：App Router（Next.js 13+）

app/api/admins/route.js

import { PrismaClient } from '@prisma/client'

const prisma = new PrismaClient()

export async function GET() {
  try {
    const admins = await prisma.admins.findMany()
    console.log(admins) // 服务端控制台打印数据
    return Response.json(admins) // 正确返回JSON响应
  } catch (error) {
    return Response.json({ error: '获取管理员数据失败' }, { status: 500 })
  }
}

情况2：Pages Router

pages/api/admins.js

import { PrismaClient } from '@prisma/client'

const prisma = new PrismaClient()

export default async function handler(req, res) {
  if (req.method !== 'GET') {
    res.setHeader('Allow', ['GET'])
    return res.status(405).end(`Method ${req.method} Not Allowed`)
  }

  try {
    const admins = await prisma.admins.findMany()
    console.log(admins)
    res.status(200).json(admins) // 用res.json返回JSON
  } catch (error) {
    res.status(500).json({ error: '获取管理员数据失败' })
  }
}

第二步：React组件中正确调用API #

在组件中调用fetch时，必须执行.json()解析，并处理响应状态和错误：

'use client' // App Router下的组件需要添加该指令

import { useEffect, useState } from 'react'

export default function AdminList() {
  const [admins, setAdmins] = useState([])
  const [errorMsg, setErrorMsg] = useState('')

  useEffect(() => {
    const loadAdmins = async () => {
      try {
        const response = await fetch('/api/admins')
        
        // 先检查响应是否成功（状态码200-299）
        if (!response.ok) {
          throw new Error(`请求失败：${response.status} ${response.statusText}`)
        }
        
        const adminData = await response.json() // 解析JSON数据
        setAdmins(adminData)
      } catch (err) {
        setErrorMsg(err.message)
      }
    }

    loadAdmins()
  }, [])

  if (errorMsg) return <div className="error">{errorMsg}</div>
  if (admins.length === 0) return <div>加载中...</div>

  return (
    <div className="admin-list">
      <h3>管理员列表</h3>
      <ul>
        {admins.map(admin => (
          <li key={admin.id}>
            {admin.username} - {admin.email}
          </li>
        ))}
      </ul>
    </div>
  )
}

常见排查点 #

• 遗漏.json()调用：这是最常见的错误，记住fetch返回的不是直接的数据，需要手动解析
• 忽略响应状态：即使服务端返回500错误，fetch不会自动抛出异常，必须通过response.ok判断
• API路由返回错误：比如服务端代码中忘记返回响应，或者返回了非JSON格式内容（比如直接console.log而不是res.json）
• 跨域问题：本地开发时Next.js API路由和前端同域，一般不会出现；部署后要确保域名一致

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