React Context报错：无法解构useContext返回值的team属性，求排查

在Team.tsx组件中尝试访问Team上下文时触发错误：

Cannot destructure property 'team' of '(0 , react__WEBPACK_IMPORTED_MODULE_2__.useContext)(...)' as it is undefined

报错位置：./app/components/Select/Team.tsx:15:13

已在组件中通过useContext引入Team上下文，但问题未解决，相关代码如下：

Team.tsx 组件代码 #

const Team: FC<Props> = ({values}) => { 
    
    const {team, setTeam} = useContext(TeamContext)
    
    const onValueChange = useCallback((team: string) => setTeam(team),[setTeam])
    
    return (
        <Select
            defaultValue={DEFAULT_TEAM}
            value={team}
            onValueChange={onValueChange}
        >
            <SelectTrigger>
                <SelectValue placeholder="Select a team" />
            </SelectTrigger>
            <SelectContent>
                <SelectLabel> Team </SelectLabel>
                {
                    values.map((team) => (
                        <SelectItem key={team} value={team}>
                            {team}
                        </SelectItem>
                    ))
                }
            </SelectContent>
        </Select>
    )
}

上下文创建代码 #

'use client'

import {createContext, useState } from 'react'
import type {Dispatch, SetStateAction, PropsWithChildren} from 'react'


type TeamContextType = {
    team: string,
    setTeam: Dispatch<SetStateAction<string>>
}

export const DEFAULT_TEAM = 'Arsenal'

const TeamContext = createContext<TeamContextType>({
    team: DEFAULT_TEAM,
    setTeam: () => {

    },
})

export const TeamContextProvider = ({children}: PropsWithChildren) => { 
    const [team, setTeam] = useState<string>(DEFAULT_TEAM)

    return (
        <TeamContext.Provider value={{team, setTeam}}>
            {children}
        </TeamContext.Provider>
    )
}

export default TeamContext;

可能的原因 #

• Team组件未被TeamContextProvider包裹：useContext仅能在对应Provider的子组件树中获取上下文值。如果Team组件不在TeamContextProvider的覆盖范围内，useContext(TeamContext)会返回undefined，进而触发解构错误。

• TeamContextProvider未正确挂载：比如在Next.js App Router中，若未将TeamContextProvider放在根布局（如layout.tsx）这类全局组件中，或者错误地在服务端组件中挂载该Provider（你的上下文代码已加'use client'，但需确保挂载位置是客户端组件或允许客户端组件的位置），都会导致Team组件无法获取上下文。

• 上下文导入错误：检查Team.tsx中TeamContext的导入方式是否正确。上下文代码中是默认导出TeamContext，所以Team.tsx中需用import TeamContext from '../path/to/your-context-file'，若误用命名导入会导致获取到错误的上下文对象。

• Team.tsx未声明为客户端组件：useContext是React客户端API，若Team.tsx是服务端组件（未添加'use client'指令），调用useContext会引发异常，导致上下文值为undefined。

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