Next.js中Feed.tsx组件引入Index.tsx页面无法渲染问题排查

核心触发原因 #

Next.js 框架的页面级数据获取方法（getServerSideProps/getStaticProps/getInitialProps）仅会对pages目录下作为路由入口的页面组件生效，不会作用于被引入的普通子组件：

• 当你直接访问/feed路由时，Next.js 会将Feed.tsx识别为路由页面，自动执行文件内的getServerSideProps方法拉取posts数据，再将数据作为props传入PostList组件，因此看起来可以正常渲染。
• 当你把PostList作为子组件引入到Index.tsx首页时，Next.js 只会执行首页自身的页面级数据方法（当前Index.tsx未定义任何数据获取逻辑），完全不会运行Feed.tsx里写的getServerSideProps，传入PostList的posts参数始终为undefined，自然无法渲染列表内容。

代码附带的隐藏问题 #

你的getServerSideProps逻辑本身存在兼容性错误：
getServerSideProps全程在Node.js服务端运行，执行环境不存在浏览器专属的window对象，你写的window.alert(message)在服务端执行时会直接抛出window is not defined的运行时错误，哪怕直接访问/feed路由也会触发控制台异常。

方案1：将数据获取逻辑迁移到路由页面（适合首屏SSR场景） #

把拉取posts的逻辑移到index.tsx的getServerSideProps中，拿到数据后作为props传入PostList子组件：

修正后的index.tsx代码 #

import Create from "./create";
import PostList from "./feed";

const Home = ({ posts }) => {
return(
    <div>
        <h1 className="text-blue absolute inset-y-7 left-7 text-xl font-semibold mb-20">Home</h1>
        <Create />
        <PostList posts={posts} />
    </div>
);}

export async function getServerSideProps(){
  // 服务端请求建议用内网地址，避免额外的公网开销
  const response = await fetch('http://localhost:3000/posts/')
  if (!response.ok) {
    return {
      props: {
        posts: [],
        error: `数据加载失败: ${response.statusText}`
      }
    }
  }
  const data = await response.json();
  
  return{
    props:{
      posts: data,
    },
  }
}

export default Home

同时删除Feed.tsx里的getServerSideProps代码，把PostList作为纯展示组件使用即可。

方案2：改为组件内客户端请求（适合可复用组件场景） #

如果你希望PostList组件可以在任意页面引入、不需要依赖父页面传数据，就把数据请求逻辑放到组件客户端侧，用useEffect或者成熟的请求库（SWR/React Query）拉取数据：

修正后的Feed.tsx代码 #

'use client' // Next.js App Router需要加这行，Pages Router可省略
import { useEffect, useState } from "react";
import Post from "../components/Post";

function PostList(){
  const [posts, setPosts] = useState([])
  const [error, setError] = useState('')

  useEffect(() => {
    const fetchPosts = async () => {
      const response = await fetch('/posts/')
      if (!response.ok) {
        const message = `An error occured: ${response.statusText}`;
        alert(message);
        setError(message)
        return;
      }
      const data = await response.json();
      setPosts(data)
    }
    fetchPosts()
  }, [])

  if(error) return <div>列表加载失败</div>

  return( <>
    {posts?.map((post) => {
      return(
      <div key={post.id}>
        <Post post={post}/>
      </div>
      )
    })}
  </>
  )
}
export default PostList

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