Next.js客户端组件需渲染props.children才接收预期props？

我在Next.js中遇到了一个奇怪的传参问题：服务端组件获取数据后传递给客户端组件，服务端打印数据完全正常，但客户端组件竟只收到未主动传递的children props；当在客户端组件中渲染props.children时，才能收到传递的目标news props，但children不再存在，且组件会被渲染两次，疑似出现自引用情况。

相关代码如下：

服务端组件 #

// SERVER SIDE COMPONENT

'user server';

const Page = async () => {
    const news = await getAllNews();
    console.log(news)
    //correctly logs news in the server console
    return <Template news={news}/>
}

export default Page;

未渲染props.children的客户端组件 #

//CLIENT SIDE COMPONENT WHERE NEWS IS NOT PASSED

'use client';

const PageTemplate = (props: any) => {
    console.log(props);
    // console logs children, which is a React component
    return (
        <S.PageTemplateWrapper>
            Template
        </S.PageTemplateWrapper>
    )
}

export default PageTemplate;

渲染props.children的客户端组件 #

//CLIENT SIDE COMPONENT WHERE NEWS IS  PASSED

'use client';

const PageTemplate = (props: any) => {
    console.log(props);
    // console logs children, then news (separately). Renders two instances of "Template"
    return (
        <S.PageTemplateWrapper>
            Template
            {props.children}
        </S.PageTemplateWrapper>
    )
}

export default PageTemplate;

想请教：props.children来自何处？为何只有渲染props.children时才能拿到传递的数据？

问题分析与解决 #

1. props.children的来源 #

核心问题是组件导入错误导致的自引用：服务端组件中的<Template>并没有正确指向客户端的PageTemplate组件，而是不小心导入了自身（服务端的Page组件）。此时<Template news={news}>等价于递归调用Page组件，React会将递归调用时的组件内容当作children传递给外层组件，这就是你看到莫名children的原因。

2. 为何渲染children时才能拿到目标props #

当你在客户端组件中渲染props.children时，实际上触发了递归的Page组件渲染：第一次外层Page组件将news传入递归的Page组件，此时递归的组件能正确拿到news props；但因为递归渲染，会出现两次Template输出，同时控制台会打印两次props（第一次是外层组件的children，第二次是递归组件的news）。

解决步骤 #

• 检查导入语句：在服务端Page组件中，确保正确导入客户端的PageTemplate组件，比如：

  import PageTemplate as Template from './NewsTemplate'; // 替换为你的客户端组件实际路径
  

• 避免组件命名冲突：不要让客户端组件的文件名与服务端路由组件（page.tsx）重名，防止Next.js模块解析时混淆。比如将客户端组件命名为NewsTemplate.tsx而非page.tsx。

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