Next.js页面组件接收pageProps为空的问题排查

你的问题核心是页面组件未默认导出，同时存在语法不严谨的问题，具体分析和修复如下：

1. 核心问题：缺少组件默认导出
   Next.js要求页面组件必须通过export default导出，否则无法正确关联getServerSideProps返回的props，也无法接收_app.js传递的pageProps。你的index.js中只定义了IndexPage组件，但没有默认导出，导致组件无法获取到传入的属性。

2. 次要问题：语法不严谨
   index.js里return语句的闭合部分缺少分号，虽然不会直接导致props为空，但会影响代码语法完整性。

修改后的index.js代码如下：

import { useEffect } from 'react'; // 补充useEffect的导入，原代码遗漏了这一步

const IndexPage = props => {

  useEffect(() => {
    console.log(props); // 现在应该能正常输出 { data: ["Hello World!"] }
  }, [props]);

  return (
    <>
      {/* 页面内容 */}
    </>
  ); // 补充分号，确保语法完整
};

export default IndexPage; // 关键：默认导出页面组件

export const getServerSideProps = async () => {
  return {
    props: {
      data: ["Hello World!"]
    }
  };
};

额外建议：

• 确认所有React Hooks都已正确导入
• 重启Next.js开发服务器，避免缓存引发的异常

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