Next.js App Router中Context无法正常消费问题求助

我正将项目从React迁移至Next.js，项目中使用了Context。我在所需路由的layout.tsx（App Router）中用Context Provider包裹了子组件，但在子组件中消费该Context时毫无作用。我已确保Context创建、子组件等均为客户端组件，问题仍未解决，恳请协助。

消费Context的组件代码 #

'use client'
import { useState } from "react"
import Image from "next/image"
import api from "../../../interceptors"
import { useRouter } from "next/navigation"
import create_simulation from "../../../public/create_simulation.svg"
import { useUserRoomContext } from "../../../lib/contexts/UserContext"

const CreateInterview = () => {
    const [loading,setLoading]=useState(false)
    const [error,setError]=useState("")
    const [interviewDetails , setInterviewDetails] = useState({
        company_name : "" , 
        job_description : "" , 
        role: "",
        resume: "",
    })
    
    const router = useRouter()
    const {setRoomId, setToken}=useUserRoomContext()
    // 省略其他业务逻辑
}

Context定义代码 #

"use client"
import {createContext, useState, useContext} from "react"

const userRoomContext = createContext()
export const useUserRoomContext = () => useContext(userRoomContext)

export const UserRoomProvider = ({children}) =>{

    const [roomId,setRoomId] = useState("")
    const [token,setToken]=useState(null)
    const [reportGenerated,setReportGenerated]=useState(false)

    const value={
        roomId,
        setRoomId,
        token,
        setToken,
        reportGenerated,
        setReportGenerated
    }

    return <userRoomContext.Provider value={value}>
        {children}
    </userRoomContext.Provider>
}

路由布局文件（layout.tsx）代码 #

"use client"
import React from 'react'
import { UserRoomProvider } from '@/lib/contexts/UserContext'
import ProtectedRoute from '@/components/protection/ProtectedRoute'

const InterviewLayout = ({children}: Readonly<{children: React.ReactNode}>) => {
    console.log("Interview layout rendered")
    return (
        <UserRoomProvider>
            <ProtectedRoute>{ children }</ProtectedRoute>
        </UserRoomProvider>
      )
}

export default InterviewLayout

1. 补全Context默认值 #

当前创建Context时未设置默认值，若组件意外不在Provider范围内，useContext会返回undefined，直接解构会抛出错误。添加默认值既能避免报错，也能辅助排查问题：

// 修改Context定义代码
const userRoomContext = createContext<{
  roomId: string;
  setRoomId: (id: string) => void;
  token: string | null;
  setToken: (token: string | null) => void;
  reportGenerated: boolean;
  setReportGenerated: (val: boolean) => void;
}>({
  roomId: "",
  setRoomId: () => {},
  token: null,
  setToken: () => {},
  reportGenerated: false,
  setReportGenerated: () => {},
})

2. 确认路由层级与Provider范围 #

检查InterviewLayout是否是目标路由的父布局：比如CreateInterview在/interview/create路径下，InterviewLayout必须放在app/interview/layout.tsx中。可以在CreateInterview中打印useUserRoomContext()的返回值，判断组件是否真的处于Provider覆盖范围内。

3. 排查ProtectedRoute的影响 #

检查ProtectedRoute组件的逻辑：如果它存在未授权重定向、条件渲染时跳过children传递等情况，会导致子组件脱离Provider范围。确保ProtectedRoute正确渲染传入的children，没有额外的层级干扰Context传递。

4. 清除缓存并重启服务 #

Next.js开发模式下可能存在组件缓存，尝试清除浏览器缓存、重启dev服务器，确保所有客户端组件都重新编译加载。

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