React(TypeScript)中Context使用报错排查：Next.js上下文配置问题

你遇到的错误核心是Context的类型定义和Provider传入的value类型不匹配：

• 你创建Context时，指定的类型是State（一个只有tasks属性的对象）
• 但传给Context.Provider的value是数组[state, setState]，这个数组的类型是(State | Dispatch<SetStateAction<State>>)[]，显然和State类型完全不兼容，TypeScript就会报错说数组里找不到tasks属性。

修正步骤 #

1. 重新定义Context的类型

你需要让Context的类型匹配你实际要传递的内容——也就是state和setState的组合。有两种常用方式：

方式一：使用元组类型（和你JS里的写法更接近）

// 定义Context的类型为包含state和setState的元组
type ContextType = [State, React.Dispatch<React.SetStateAction<State>>]

// 创建Context时指定这个类型，同时给初始值（初始的setState可以是空函数，因为实际会被Provider覆盖）
export const Context = createContext<ContextType>([initialState, () => {}])

方式二：使用对象类型（可读性更好，推荐）

// 定义Context的类型为包含state和setState的对象
type ContextType = {
  state: State
  setState: React.Dispatch<React.SetStateAction<State>>
}

// 创建Context时指定这个类型，初始值对应结构
export const Context = createContext<ContextType>({
  state: initialState,
  setState: () => {}
})

2. 修正Provider的value

对应你选择的类型，修改value的传递：

• 如果用元组类型：

<Context.Provider value={[state, setState]}>
  {children}
</Context.Provider>

• 如果用对象类型：

<Context.Provider value={{ state, setState }}>
  {children}
</Context.Provider>

完整修正后的代码（对象类型版本） #

import { createContext, useState, Dispatch, SetStateAction } from "react";
import { ReactNode } from "react";

interface Task {
    name: string,
    finished: boolean
}

interface State {
    tasks: Task[]
}

const initialState: State = {
    tasks: []
}

// 定义Context类型
type ContextType = {
  state: State
  setState: Dispatch<SetStateAction<State>>
}

// 创建Context
export const Context = createContext<ContextType>({
  state: initialState,
  setState: () => {}
})

type StateProps = {
    children: ReactNode
}

const StateContext = ({ children }: StateProps) => {
    const [state, setState] = useState<State>(initialState)

    return (
        <Context.Provider value={{ state, setState }}>
            {children}
        </Context.Provider>
    )
}

export default StateContext;

补充说明 #

在纯JS的React项目里，因为没有类型校验，你随便传数组或者对象都不会报错，但TypeScript会严格校验类型一致性——你告诉它Context是State类型，它就会要求Provider的value必须完全符合这个类型，所以必须修正类型定义来匹配实际传递的数据。

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