NextJS客户端数据已获取但无法渲染问题求助

核心问题：Page组件类型冲突 #

你把Page组件定义成了async函数，在Next.js App Router中，async的Page组件默认是服务器组件，而服务器组件不支持useState、useEffect这类客户端React钩子，导致你的fetchData函数根本没有执行，post始终是undefined，页面自然显示空元素。

两种解决思路 #

思路1：改为客户端组件（保留客户端请求逻辑）

如果必须在客户端发起请求，需要给组件加上'use client'指令，明确标记为客户端组件，这样才能使用useState和useEffect：

'use client'; // 必须添加这行

import { useState, useEffect } from 'react';

interface Post {
  content?: string;
  title?: string;
  date?: string;
}

interface Params {
  slug: string;
}

export default function Page({ params }: { params: Params }) {
  const [post, setPost] = useState<Post>();

  const fetchData = async () => {
    try {
      const data = await getPost(params.slug);
      // 注意：检查getPost的返回结构，如果直接返回Post对象，就写setPost(data)，不是data.post
      setPost(data.post);
    } catch (error) {
      console.error('Error fetching data:', error);
    }
  };

  useEffect(() => {
    fetchData();
  }, [params.slug]); // 依赖项加上params.slug，确保slug变化时重新请求

  return (
    <>
      <h1>{post?.title || '加载中...'}</h1>
      <p>{post?.date}</p>
      <p>{post?.content}</p>
    </>
  );
};

思路2：用服务器组件直接获取数据（推荐，符合Next.js最佳实践）

App Router中服务器组件可以直接异步获取数据，不需要客户端钩子，代码更简洁高效：

interface Post {
  content?: string;
  title?: string;
  date?: string;
}

interface Params {
  slug: string;
}

export default async function Page({ params }: { params: Params }) {
  let post: Post | undefined;
  try {
    const data = await getPost(params.slug);
    // 同样检查返回结构，直接赋值即可
    post = data.post;
  } catch (error) {
    console.error('Error fetching data:', error);
  }

  if (!post) {
    return <div>文章不存在或加载失败</div>;
  }

  return (
    <>
      <h1>{post.title}</h1>
      <p>{post.date}</p>
      <p>{post.content}</p>
    </>
  );
};

额外检查点 #

• 确认getPost的返回结构：你给出的返回数据是{content: "...", date: "...", title: "..."}，如果getPost直接返回这个对象，那代码里的setPost(data.post)应该改成setPost(data)，否则会把undefined赋值给post。
• 检查Params类型是否正确定义，避免参数传递错误。

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