如何正确为React Context Provider定义类型，使其返回User或null类型

问题根因 #

类型错误来源于createContext未显式声明泛型，TS会根据你传入的默认值[{}, () => {}]自动推断上下文类型为[{}, React.Dispatch<React.SetStateAction<{}>>]，和你实际需要传递的[User | null, 用户状态更新函数]类型不匹配。

修改方案 #

你需要给createContext显式指定泛型，同时移除不必要的非空断言，调整后的完整代码如下：

import React, { createContext, useState, useEffect, Dispatch, SetStateAction } from 'react'

interface User {
    username: string,
    id: number,
    token: string,
}

// 显式指定Context泛型：元组第一位是User|null，第二位是状态更新函数类型
const AuthContext = createContext<[User | null, Dispatch<SetStateAction<User | null>>]>(
  // 所有消费组件都在Provider内部的话，默认值不会被触发，直接断言即可
  [null, () => {}]
)

const AuthProvider = ({children}: {children: React.ReactNode} ) => {
    const [user, setUser] = useState<User | null>(null)

    useEffect(() => {
          if(sessionStorage.getItem('state')) {
              const x = sessionStorage.getItem('state')
              if (x !== null) {
                const y = JSON.parse(x) as User
                setUser(y)
              }
        }
    }, [])

    useEffect(() => {
        sessionStorage.setItem('state', JSON.stringify(user))
    }, [user])

    return (
        // 移除user后的非空断言!，否则会强制把user类型收窄为非空
        <AuthContext.Provider value={[user, setUser]}>
            {children}
        </AuthContext.Provider>
    )
}

export { AuthContext, AuthProvider }

关键修改点说明 #

• 显式给createContext传入泛型定义，明确上下文返回值的类型为[User | null, Dispatch<SetStateAction<User | null>>]，覆盖TS的自动推断结果
• 移除了Provider属性中user后的非空断言!，该断言会强制告诉TSuser永远不为空，和你预期的User | null返回类型冲突
• 调整了默认值的初始值为null，和状态初始值保持一致，避免类型歧义

内容的提问来源于stack exchange，提问作者Samuel Diaz Bidot