React+TypeScript中CreateContext/AppContext使用及TSX迁移报错解决

问题描述 #

将现有React JSX项目迁移为TSX后，AppContext无法正常工作，报错信息：类型“ContextType | null”上不存在属性“cursor”。

相关代码如下：

App.tsx（原App.JSX） #

export interface ContextType {
  cursor: {x: number, y: number},
}

export const AppContext = createContext<ContextType | null>(null);

export default function App() {
  const [ cursor, setCursor ] = useState<ContextType['cursor']>({ x: -100, y: -100 }); // 存储光标坐标

  // 省略updateCursor等逻辑...

  return(
    <div id="app" onMouseMove={ updateCursor }>
      <AppContext.Provider value={{ cursor }}>
        {/* 子组件内容 */}
      </AppContext.Provider>
    </div>
  )
}

Cursor.tsx（原Cursor.JSX） #

import { AppContext, ContextType } from "../../App";

export default function Cursor() {
    const { cursor } = useContext(AppContext);
    // 后续逻辑...
}

报错原因 #

AppContext的类型被定义为ContextType | null，使用useContext获取上下文时，TypeScript无法确定当前值是有效ContextType实例还是null，直接解构cursor会触发类型检查错误。

解决方法 #

方法1：确保上下文始终有值（推荐） #

如果所有使用该上下文的组件都被AppContext.Provider包裹，可将上下文默认值改为符合ContextType的结构，移除null类型：

// App.tsx中修改上下文定义
export const AppContext = createContext<ContextType>({
  cursor: { x: -100, y: -100 } // 与useState初始值保持一致
});

修改后useContext(AppContext)返回的类型固定为ContextType，解构操作不会再触发类型错误。

方法2：添加空值检查 #

若必须保留null类型，在解构前先做空值判断：

// Cursor.tsx中修改
const context = useContext(AppContext);
if (!context) {
  // 处理上下文为null的场景，比如返回null或提示组件需在Provider内使用
  return null;
}
const { cursor } = context;

也可使用可选链配合默认值简化代码：

const { cursor } = useContext(AppContext) || { cursor: { x: -100, y: -100 } };

方法3：非空断言（谨慎使用） #

若能确保上下文绝不会为null，可使用非空断言!跳过类型检查：

const { cursor } = useContext(AppContext)!;

注意：该方法会绕过TypeScript类型安全校验，若后续上下文出现null会引发运行时错误，仅在确认Provider一定会包裹组件时使用。

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