使用React Context做全局状态管理时遭遇TS2322类型错误求助

错误原因 #

你创建UserContext时传入的初始值是字符串'Unknown'，TypeScript会自动推断该Context的类型为string，但你在Provider中传递的value是包含userName和setUserName的对象，两者类型不匹配，因此抛出类型错误。

修复方案 #

需要显式定义Context的类型，使其匹配实际传递的对象结构：

步骤1：声明Context类型接口 #

先定义一个接口描述Context的结构：

interface UserContextType {
  userName: string;
  setUserName: React.Dispatch<React.SetStateAction<string>>;
}

步骤2：创建Context时指定类型并设置匹配的初始值 #

初始值要符合定义的接口结构，可传入一个默认值：

const UserContext = createContext<UserContextType>({
  userName: 'Unknown',
  setUserName: () => {} // 空函数作为默认setter，避免无Provider时报错
});

完整修复后的代码 #

import { createContext, useMemo, useState } from 'react';
import { BrowserRouter, Routes, Route } from 'react-router-dom';
// 导入你的组件：NavBar, Home, Resources等

interface UserContextType {
  userName: string;
  setUserName: React.Dispatch<React.SetStateAction<string>>;
}

const UserContext = createContext<UserContextType>({
  userName: 'Unknown',
  setUserName: () => {}
});

export default function App() {
  const [accessibilityMode, setAccessibilityMode] = useState<string>("");
  const [userName, setUserName] = useState<string>("");

  const value = useMemo(
    () => ({ userName, setUserName }),
    [userName]
  );

  return(
    <BrowserRouter>
      <div className={accessibilityMode}>
        <UserContext.Provider value={value}>
          <NavBar setAccessibilityMode={setAccessibilityMode}/>
          <div className="webpage-content">
            <Routes>
              <Route path="" element={<Home/>}/>
              <Route path="/resources" element={<Resources/>}/>
              <Route path="/contact" element={<ContactUs/>}/>
              <Route path="/projects" element={<Projects/>}/>
              <Route path="/fnssa" element={<WhatIsFNSSA/>}/>
              <Route path="/statement" element={<Statement/>}/>
              <Route path="/minutes" element={<MeetingMinutes/>}/>
              <Route path="/team" element={<OurTeam/>}/>
            </Routes>
          </div>
        </UserContext.Provider>
      </div>
    </BrowserRouter>
  )
}

额外说明 #

• 显式定义Context类型是TypeScript中使用React Context的最佳实践，能避免类型推断导致的不兼容问题。
• 默认值中的空函数setUserName: () => {}，是为了确保在未被Provider包裹的组件中使用Context时不会触发错误，可根据需求调整默认行为。

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