React TypeScript未捕获TypeError问题求助及代码优化

核心错误原因 #

你的代码触发TypeError的根本问题是自定义Hook useGetComplexObject 未正确返回有效值：

• 当object存在时，Hook没有任何return语句，导致其返回类型为void
• 抛出错误后的return object是死代码，永远不会执行
• 在MyComponent中，你试图访问void类型的object.kind，自然会触发类型错误和运行时异常

修复后的代码 #

import { createContext, useContext, useMemo } from "react"

type ComplexObject = {
  kind: string
}

// 给Context起语义化命名
const ComplexObjectContext = createContext<ComplexObject | null>(null)

// 优化Hook逻辑与命名
const useComplexObject = () => {
  const object = useContext(ComplexObjectContext)
  if (!object) {
    // 修正错误提示文本，明确使用范围
    throw new Error("useComplexObject must be used within a ComplexObjectContext.Provider")
  }
  // 确保存在时返回对象，TypeScript会自动推断返回类型为ComplexObject
  return object
}

export default function MyApp() {
  // 若对象创建逻辑简单，可直接去掉useMemo简化代码
  const object = useMemo(() => ({ kind: "complex" }), [])
  return (
    <ComplexObjectContext.Provider value={object}>
      <MyComponent />
    </ComplexObjectContext.Provider>
  )
}

function MyComponent() {
  const object = useComplexObject()
  return (
    <div>
      <p>current object : {object.kind}</p>
    </div>
  )
}

额外优化建议 #

• 命名规范：给Context和Hook使用语义化命名，提升代码可读性
• 类型安全强化：通过Hook的断言逻辑，确保组件使用时永远拿到有效对象，无需重复做空值检查
• 简化代码：如果你的ComplexObject创建逻辑简单，可直接去掉useMemo，写成<ComplexObjectContext.Provider value={{ kind: "complex" }}>，React会自动处理重渲染逻辑
• 错误提示精准：将错误信息修改为更明确的提示，方便后续调试定位

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