Next.js使用单页专属Layout时Auth Context Provider返回数据undefined

问题根因 #

你的组件层级包裹顺序错误，导致ProjectList不在AuthContext的作用域范围内：
当前你在_app.js中的实际渲染层级是：

ProjectLayout
├─ ProjectList （渲染在AuthContext外部，无法获取Context值）
└─ div
   └─ AuthContext
      └─ Projects页面组件

你为页面设置的ProjectLayout包裹了整个传入的page参数（也就是你包了AuthContext的部分），而ProjectList是ProjectLayout的直接子组件，自然不在AuthContext的作用域内，所以拿不到user值。当你移除getLayout配置后，没有了外层的ProjectLayout层级，所有组件都在AuthContext作用域内，数据就正常了。

解决方案 #

调整_app.js的包裹顺序，把全局的AuthContext移到getLayout的外层，保证所有布局、页面组件都在Context作用域内：

// 修改后的/_app.js
function MyApp({ Component, pageProps }) {
  const getLayout = Component.getLayout || ((page) => page);

  return (
    <AuthContext>
      {getLayout(
        <div>
          <Component {...pageProps} />
        </div>
      )}
    </AuthContext>
  );
}

export default MyApp;

修改后渲染层级变为：

AuthContext
└─ ProjectLayout
   ├─ ProjectList （已在Context作用域内，可正常取值）
   └─ div
      └─ Projects页面组件

所有组件都能正常访问AuthContext内的数据。

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