Next.js中Context API仅返回初始值、无法获取更新数据问题求助

• 核心问题：useContext 必须在对应 Context 的 Provider 组件的子组件内部调用，才能获取到 Provider 传入的自定义 value，否则永远返回 createContext 时设置的初始默认值。你在 _app.js 的 MyApp 组件内调用 useContext(UserContext) 时，<UserContextProvider> 是在 MyApp 的 return 中才渲染的，调用位置处于 Provider 的外层，因此拿到的是初始值，调用的 fetchUser 也是初始值中的空函数，不会触发 Provider 内部的状态更新。
• 次要问题1：MessageHeads.js 中打印 context 的 useEffect 依赖项为空，仅会在组件首次挂载时执行一次，后续 context 值更新不会触发重新打印，会造成值未更新的误判。
• 次要问题2：导入 Context 的路径大小写与实际文件名不一致，在大小写敏感的操作系统（Linux、MacOS）中会导致 Context 导入异常，直接返回初始值。

步骤1：重构 UserContext，把认证逻辑移到 Provider 内部 #

不需要在 _app.js 中单独维护用户状态，把监听逻辑放到 Provider 内部保证能正常更新上下文状态：

// userContext.js
import { createContext, useState, useEffect } from "react";
import { auth, db } from "../firebase";

const UserContext = createContext({
  user: null,
  fetchUser: function (data) {},
});

export const UserContextProvider = ({ children }) => {
  const [userData, setUserData] = useState(null);

  const fetchUserHandler = (data) => {
    setUserData(data);
  };

  // 把认证监听逻辑移到Provider内部
  useEffect(() => {
    const unsubscribe = auth.onAuthStateChanged((authedUser) => {
      if (authedUser) {
        db.collection("users").doc(authedUser.uid).get().then(doc => {
          if (doc.exists) {
            setUserData(doc.data());
          }
        })
      } else {
        setUserData(null);
        console.log("Logged out");
      }
    });
    // 组件卸载时取消监听避免内存泄漏
    return () => unsubscribe();
  }, []);

  const context = { user: userData, fetchUser: fetchUserHandler };

  return (
    <UserContext.Provider value={context}>{children}</UserContext.Provider>
  );
};

export default UserContext;

步骤2：简化 _app.js，移除多余的状态和context调用 #

直接保留 Provider 包裹逻辑即可：

// _app.js
import { createGlobalStyle, ThemeProvider } from "styled-components";
import { UserContextProvider } from "../context/UserContext";

const GlobalStyle = createGlobalStyle`
html{
  font-size: 62.5%;
}

body {
  @import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600;700&display=swap');
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
`;

const theme = {
  dark: {
    background: "#000",
  },
  light: {
    background: "#fff",
  },
};

function MyApp({ Component, pageProps }) {
  return (
    <>
      <GlobalStyle />
      <ThemeProvider theme={theme}>
        <UserContextProvider>
          <Component {...pageProps} />
        </UserContextProvider>
      </ThemeProvider>
    </>
  );
}

export default MyApp;

步骤3：修正 MessageHeads.js 的导入路径和useEffect依赖 #

// MessageHeads.js
import { useState, useEffect, useContext } from "react";
import {
  Container,
  Button,
} from "../styled-components/MessageHeads";
// 修正导入路径大小写和实际文件名一致
import UserContext from "../context/UserContext";

export default function MessageHeads() {
  const userCtx = useContext(UserContext);

  // 添加userCtx.user作为依赖，值更新时会重新执行
  useEffect(() => {
    console.log("当前用户数据：", userCtx.user);
  }, [userCtx.user]);

  return (
    <Container>   
        <Button onClick={() => console.log(userCtx)}>
          Create conversation
        </Button>
    </Container>
  );
}

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