Next.js搭配TypeScript使用Context Provider报错如何修复

• 核心问题是API调用错误：你使用React.createElement尝试创建Context，但该API的作用是生成普通React元素实例，返回值类型为ReactElement，本身不存在Provider属性，直接触发TS类型报错。React中创建Context的正确API是React.createContext。
• 代码还存在两处隐性问题：
  • Context定义写在组件函数内部，每次组件重渲染都会生成全新的Context实例，会导致后续消费Context的子组件无法正确获取更新后的值。
  • Context类型声明与实际传入的value字段不匹配：接口定义的字段是selected、setSelected，实际传入的是currentSelected、setCurrentSelected；同时useState<number>()未传入初始值，返回的状态类型实际为number | undefined，与声明的number类型不兼容。

1. 将Context的类型定义、创建逻辑移到组件外部，使用React.createContext替代React.createElement创建Context，传入符合类型的默认值消除TS类型校验错误。
2. 统一Context类型声明与实际传入的value字段，修正状态类型定义。
3. 渲染列表项时建议使用标准JSX组件写法替代直接函数调用，同时补充列表唯一key，避免hooks执行顺序异常、React渲染Diff异常问题。

修复后的完整代码：

import React, { useState } from 'react'
import type { Dispatch, SetStateAction } from 'react'

// Context类型定义移到组件外
interface SelectContext {
  currentSelected: number | undefined
  setCurrentSelected: Dispatch<SetStateAction<number | undefined>>
}

// 正确创建Context，传入默认值
const SelectedContext = React.createContext<SelectContext>({
  currentSelected: undefined,
  setCurrentSelected: () => {}
})

const RoomsCards = ({ rooms }: IRooms) => {
  const [currentSelected, setCurrentSelected] = useState<number | undefined>()
  
  return (
    <SelectedContext.Provider value={{ currentSelected, setCurrentSelected }}>
      {rooms.map((room: IRoomDetail) => (
        <MainCard key={room.id} {...room} />
      ))}
    </SelectedContext.Provider>
  )
}
    
export default RoomsCards
// 子组件消费时直接引入SelectedContext，配合useContext(SelectedContext)即可获取值

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