我有一个auth上下文组件，我在其中 Package 了我的主要应用程序组件，但同时我也在尝试根据Next.js文档做页面特定的布局组件，如下所示：https://nextjs.org/docs/basic-features/layouts#per-page-layouts
我这样做是否正确，因为我似乎无法从我的上下文提供者获取数据。

/上下文/身份验证上下文.js

const UserContext = createContext({});

export default function AuthContext({children}) {
  // .. code
  return (
    <UserContext.Provider value={{ user, setUser }}>
      {children}
    </UserContext.Provider>
  );
}

export const useUser = () => useContext(UserContext);

/_应用程序.js

function MyApp({ Component, pageProps }) {    

  const getLayout = Component.getLayout || ((page) => page);

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

export default MyApp;

/组件/项目/列表.js

import { useUser } from "../../context/AuthContext";

const ProjectList = () => {
  const { user } = useUser();
  console.log("get user data", user);

  return (
    <>
      test
    </>
  );
};

export default ProjectList;

我试着控制台记录用户，但是它给了我undefined。我想这是因为它被 Package 成布局组件的方式吗？我可能做错了。但是我在我的AuthContext for user中做了控制台记录，那里的信息是正确的。

/页面/项目/索引.js

const Projects = () => {
  // code goes here
  return (
    <div>
      code goes here
    </div> 
  )
}

export default Projects;

Projects.getLayout = function getLayout(page) {
  return <ProjectLayout>{page}</ProjectLayout>;
};

当我删除Projects.getLayout代码块时，数据回来了，但是当我添加这段代码时，数据不见了。

/组件/项目/布局.js

const ProjectLayout = ({children}) => {
  return (
    <>
      <ProjectList />
      {children}
    </>
  }

export default ProjectLayout