React+TypeScript中useContext全局状态构建编译错误解决方法

问题根源：你创建StoreContext时没有指定上下文的类型，TypeScript默认将其推断为unknown类型，因此在解构test属性时会抛出类型错误。

修复步骤： #

1. 定义Store的类型接口
   先明确全局状态的结构，创建对应的TypeScript接口：

   interface Store {
     test: string[];
   }
   

2. 为createContext指定类型并设置默认值
   创建上下文时显式传入类型，并设置一个符合结构的默认值（避免undefined导致的额外类型问题）：

   export const StoreContext = React.createContext<Store>({ test: [] });
   

3. 完善StoreProvider的类型定义
   替换自定义的ChildrenType为React内置的React.ReactNode，避免类型未定义的问题。

修正后的完整代码 #

store.tsx

import React from 'react';

// 定义全局状态的类型接口
interface Store {
  test: string[];
}

// 显式指定上下文类型并设置默认值
export const StoreContext = React.createContext<Store>({ test: [] });

export const StoreProvider = ({ children }: { children: React.ReactNode }) => {
  const [test] = React.useState(['world']);

  const store = {
    test,
  };

  return <StoreContext.Provider value={store}>{children}</StoreContext.Provider>;
};

index.tsx

import React from 'react';
import { StoreContext } from '../store';

export default function Home() {
  // 现在TypeScript能正确推断store的类型，不会报错
  const { test: [test] } = React.useContext(StoreContext);

  return (
    <div>
      <h1>
        hello
        {test}
      </h1>
    </div>
  );
}

修复说明 #

• 显式指定上下文类型后，TypeScript能准确识别StoreContext的值结构，消费时不会再将其视为unknown。
• 设置默认值可以避免在未包裹StoreProvider的情况下出现undefined的类型问题，同时符合React Context的最佳实践。

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