Next.js向组件传递props时值为undefined问题排查

核心错误出在all-posts组件的导出语句，属于React组件导出的常见语法错误：
你在文件末尾写的是export default AllPosts()，多写了一对函数调用括号，相当于在模块加载阶段就直接执行了AllPosts函数，把函数执行返回的JSX结果作为默认导出值，而不是把AllPosts组件函数本身导出。

这个错误会直接导致你遇到的两个异常现象：

• Next.js路由渲染时无法识别导入的AllPosts为合法React组件，连带页面组件AllPostsPage的渲染逻辑异常，所以你写在页面里的console.log(DUMMY_POST)根本不会执行
• 提前执行AllPosts函数时没有传入任何参数，函数内部拿到的props本身就是undefined，后续你在页面里给<AllPosts />传参也不会生效——因为你导入的根本不是可接收传参的组件函数，只是一个提前生成的固定JSX片段。

只需要修改all-posts.js文件的最后一行导出语句，删掉多余的调用括号即可：

// 错误写法
// export default AllPosts()

// 正确写法
export default AllPosts

修正后的完整all-posts.js代码如下：

import classes from './all-posts.module.css'
import PostsGrid from './posts-grid'

function AllPosts(props) {
    return (
    <section className={classes.posts}>
        <h1>All posts</h1>
        <PostsGrid posts={props.posts} />
    </section>
    )
}
export default AllPosts

其余两个文件（AllPostsPage页面文件、_app.js入口文件）的代码逻辑没有问题，改完导出错误后，页面的console.log会正常打印模拟数据，AllPosts组件也能正常接收到传入的posts属性。

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