React可修改Context创建失败：Provider实例化类型错误

错误根源 #

你在定义AuthContextProvider组件时，错误地将React.FC的泛型参数设为React.ReactNode——这混淆了组件props的类型定义和子元素的类型。React.FC的泛型应该对应组件接收的props结构，而非子元素的类型。

修复步骤 #

修改app/authContext/index.tsx中的AuthContextProvider组件定义：

原错误代码 #

const AuthContextProvider: React.FC<React.ReactNode> = ({children}) => {
  // ...组件逻辑
}

修复方案（二选一） #

方案1：使用默认React.FC

React.FC默认包含children?: React.ReactNode的props定义，无需额外指定泛型：

const AuthContextProvider: React.FC = ({children}) => {
  const [auth, setAuth] = React.useState<IAuth>({user: null});

  const saveAuth = (auth: IAuth) => {
    setAuth(auth);
  }

  return <AuthContext.Provider value={{auth, saveAuth}}>{children}</AuthContext.Provider>;
}

方案2：显式定义props类型（更清晰）

interface AuthContextProviderProps {
  children: React.ReactNode;
}

const AuthContextProvider: React.FC<AuthContextProviderProps> = ({children}) => {
  const [auth, setAuth] = React.useState<IAuth>({user: null});

  const saveAuth = (auth: IAuth) => {
    setAuth(auth);
  }

  return <AuthContext.Provider value={{auth, saveAuth}}>{children}</AuthContext.Provider>;
}

额外优化建议 #

你定义的AuthContextType中声明的是setAuth方法，但Provider的value里传的是saveAuth，建议保持命名一致，避免后续使用混淆：

// 把saveAuth重命名为setAuth
const setAuth = (auth: IAuth) => {
  setAuth(auth);
}

return <AuthContext.Provider value={{auth, setAuth}}>{children}</AuthContext.Provider>;

错误原因解释 #

当你写React.FC<React.ReactNode>时，TypeScript会认为该组件的props类型是React.ReactNode，但你实际传入的是{ children: Element }，这与React.ReactNode（包含ReactElement、字符串、数字、null等多种类型）的结构不匹配，尤其是ReactPortal的属性要求，因此触发了类型不兼容的错误。

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