Next.js App Router中Fetch获取数据为空的问题求助

以下是针对你问题的具体排查和解决步骤：

1. 检查前端Fetch的响应处理逻辑 #

大概率是前端未正确解析响应内容，只拿到了原始的Response对象而非实际数据。修正示例：

// 错误写法：未解析响应
async function fetchUserData() {
  const res = fetch('/api/userData');
  console.log(res); // 输出的是Response实例，不是用户数据
}

// 正确写法
async function fetchUserData() {
  const res = await fetch('/api/userData');
  // 先校验请求状态
  if (!res.ok) {
    throw new Error(`请求失败：${res.status}`);
  }
  const data = await res.json(); // 必须调用json()解析数据
  console.log(data);
}

2. 禁用Fetch默认缓存 #

Next.js App Router中，客户端组件的fetch默认会缓存请求结果，可能导致你拿到旧的空数据。可以通过配置禁用缓存：

async function fetchUserData() {
  const res = await fetch('/api/userData', {
    cache: 'no-store', // 完全禁用缓存
    // 或者用revalidate实时刷新
    // next: { revalidate: 0 }
  });
  const data = await res.json();
  console.log(data);
}

3. 确认API路由的返回逻辑 #

检查API路由是否正确返回数据，尤其注意不要遗漏return语句：

// app/api/userData/route.js
import { NextResponse } from 'next/server';

export async function GET() {
  const userData = await fetchFromDB(); // 你的数据库查询逻辑
  console.log(userData); // 终端能输出正确数据

  // 确保返回响应对象，且明确设置Content-Type
  return NextResponse.json(userData, {
    status: 200,
    headers: {
      'Content-Type': 'application/json',
    },
  });
}

4. 确认组件的渲染环境 #

如果是服务器组件，fetch会在服务器端执行，前端浏览器的console.log看不到数据（日志会出现在终端）。如果要在客户端执行fetch，必须给组件加上'use client'指令：

'use client'; // 标记为客户端组件

export default function UserDataComponent() {
  useEffect(() => {
    async function fetchData() {
      const res = await fetch('/api/userData');
      const data = await res.json();
      console.log(data); // 此时浏览器控制台能看到数据
    }
    fetchData();
  }, []);

  return <div>用户数据展示组件</div>;
}

5. 校验API路径正确性 #

确保前端fetch的路径是绝对路径（以/开头），避免嵌套路由下的相对路径错误。比如不管组件在哪个路由下，统一用/api/userData而非../api/userData。

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