React useContext结合TypeScript报错：‘[show: boolean, setShow: ...] | undefined’不是数组类型的问题咨询

这个错误的核心原因很清晰：你定义的MobileContext类型允许返回undefined（因为给createContext传的默认值是undefined），而TypeScript不允许对可能为undefined的值做数组解构——毕竟undefined本身不是数组类型。

下面给你几种靠谱的解决思路，按推荐程度排序：

1. 自定义专属Context钩子（最推荐） #

创建一个封装好的自定义钩子，强制要求组件必须在MobileProvider内部使用，同时自动处理undefined的情况。这样既解决类型问题，还能提前拦截运行时错误。

修改你的context.mobile.ts，添加这个钩子：

import { useBoolean } from "@chakra-ui/react"
import { createContext, FC, useContext } from "react"

type useBooleanReturn = ReturnType<typeof useBoolean>

export const MobileContext = createContext<
  [show: useBooleanReturn[0], setShow: useBooleanReturn[1]] | undefined
>(undefined)

// --- PROVIDER
const MobileProvider: FC = ({ children }) => {
  const [show, setShow] = useBoolean(false)
  return (
    <MobileContext.Provider value={[show, setShow]}>
      {children}
    </MobileContext.Provider>
  )
}

// 添加自定义钩子
export const useMobileContext = () => {
  const context = useContext(MobileContext);
  if (!context) {
    throw new Error("useMobileContext 必须在 MobileProvider 内部使用");
  }
  return context;
};

export default MobileProvider

然后在消费组件里用这个钩子代替直接调用useContext：

import * as React from "react"
import MobileProvider, { useMobileContext } from "./context.mobile"

const Mobile = () => {
  const [show, setShow] = useMobileContext()
  // 这里不会再有类型错误了
}

export default Mobile

这种方式的优势在于：TypeScript能确定useMobileContext返回的一定是数组类型（因为如果是undefined会直接抛出错误），同时还能防止其他开发者不小心在Provider外部使用这个钩子，提前规避运行时问题。

2. 非空断言（快速但不推荐） #

如果你能100%保证消费组件一定在MobileProvider内部，可以用TypeScript的非空断言运算符!强制告诉编译器“这个值不可能是undefined”：

const Mobile = () => {
  const [show, setShow] = React.useContext(MobileContext)!
  // ...
}

但要注意：如果哪天组件被移到Provider外部，运行时会直接报错，所以这种方式只适合临时快速修复，不推荐在生产代码里长期使用。

3. 条件判断兜底 #

如果你的组件有可能在Provider外部使用，可以先判断context是否存在，再进行解构：

const Mobile = () => {
  const mobileContext = React.useContext(MobileContext)
  
  if (!mobileContext) {
    // 这里可以返回一个 fallback UI，比如null或者错误提示
    return null;
  }
  
  const [show, setShow] = mobileContext
  // ...正常渲染逻辑
}

这种方式比较安全，但会增加一些代码量，适合需要处理Provider外部场景的情况。

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