在TypeScript项目中实现useContext遇阻，请求技术帮助

你的代码存在两个核心TypeScript错误根源：

• 创建Context时误用了未定义的DialogContext类型，形成循环引用
• useContext返回值可能为null，直接解构会触发类型校验错误

以下是修正后的完整代码及说明：

1. 重构Context组件（定义类型+安全封装） #

import { ReactNode, createContext, useState, useContext } from 'react'

// 第一步：明确Context值的完整类型
type DialogContextValue = {
  open: boolean
  handleOpen: () => void
  handleClose: () => void
  player1ButtonText: string
  setPlayer1ButtonText: React.Dispatch<React.SetStateAction<string>>
  player2ButtonText: string
  setPlayer2ButtonText: React.Dispatch<React.SetStateAction<string>>
}

// 第二步：用定义好的类型初始化Context，默认值设为null
const DialogContext = createContext<DialogContextValue | null>(null)

function DialogProvider({ children }: { children: ReactNode }) {
  const [player1ButtonText, setPlayer1ButtonText] = useState('SELECT PLAYER 1')
  const [player2ButtonText, setPlayer2ButtonText] = useState('SELECT PLAYER 2')
  const [open, setOpen] = useState(false)
  
  const handleOpen = () => setOpen(true)
  const handleClose = () => setOpen(false)

  return (
    <DialogContext.Provider
      value={{
        open,
        handleOpen,
        handleClose,
        player1ButtonText,
        setPlayer1ButtonText,
        player2ButtonText,
        setPlayer2ButtonText,
      }}
    >
      {children}
    </DialogContext.Provider>
  )
}

// 第三步：自定义钩子，强制组件在Provider范围内使用，避免null判断
function useDialogContext() {
  const context = useContext(DialogContext)
  if (!context) {
    throw new Error('useDialogContext 必须在 DialogProvider 内部使用')
  }
  return context
}

export { DialogProvider, useDialogContext }

2. 在业务组件中使用Context #

export default function SelectPlayerBox() {
  // 使用自定义钩子，无需处理null情况
  const { handleOpen, player1ButtonText, player2ButtonText } = useDialogContext()
  return (
    <div>
      <button onClick={handleOpen}>{player1ButtonText}</button>
      <button>{player2ButtonText}</button>
    </div>
  )
}

3. App组件（无需修改） #

// ...
<DialogProvider>
   <SelectPlayerBox />
</DialogProvider>
// ...

核心优化点 #

• 显式定义DialogContextValue类型，让TypeScript能准确校验Provider的value和组件的使用场景
• 自定义useDialogContext钩子，既避免了组件中重复的null判断，又强制了组件必须在Provider范围内使用，减少运行时错误
• 简化函数定义写法，保持代码简洁性

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