Javascript 类型为'的参数；{…}'；不可分配给类型为'；语境<；AuthProps>'；

在我的Ionic（React）应用程序项目中，我正在使用Firebase创建一个登录和注册界面，下面是我的代码片段

interface LoginProps extends RouteComponentProps<any> {}
interface AuthProps {}

const Login: FC<LoginProps> = ({ history }) => {
  const handleLogin = useCallback(
    async event => {
      event.preventDefault();
      const { email, password } = event.target.elements;
      try {
        await Firebase
          .auth()
          .signInWithEmailAndPassword(email.value, password.value);
        history.push("/dashboard");
      } catch (error) {
        alert(error);
      }
    },
    [history]
  );

  const { currentUser } = useContext<AuthProps>(AuthContext);

  if (currentUser) {
    return <Redirect to="/" />;
  }

接口登录操作扩展了RouteComponentProps{}
接口AuthProps{}
常量登录名：FC=（{history}）=>{
const handleLogin=useCallback(
异步事件=>{
event.preventDefault（）；
const{email，password}=event.target.elements；
试一试{
等待火力基地
.auth（）
.使用email和password（email.value、password.value）进行登录；
历史。推送（“/仪表板”）；
}捕获（错误）{
警报（错误）；
}
},
[历史]
);
const{currentUser}=useContext（AuthContext）；
如果（当前用户）{
返回；
}

我收到以下错误消息：

[react scripts]在/Users/matheusilra/Desktop/brasilsul-repasse/src/pages/Login.tsx（43,49）中键入脚本错误：

“{AuthContext:react.Context；AuthProvider:（{children}:{children:any；}）=>JSX.Element；}”类型的[react scripts]参数不能分配给“Context”类型的参数

[react scripts]类型“{AuthContext:Context；AuthProvider:（{children}:{children:any；}）=>Element；}”缺少类型“Context”中的以下属性：提供程序、使用者TS2345

错误消息指向这部分代码：

const{currentUser}=useContext（AuthContext）

我不知道如何修正这个错误

//编辑

AuthContext代码

import React, { useEffect, useState, createContext } from "react"
import Firebase from "./firebase"

export const AuthContext = createContext(null)
export const AuthProvider = ({ children }) => {
    const [currentUser, setCurrentUser] = useState(null)

    useEffect(() => {
        Firebase.auth().onAuthStateChanged(setCurrentUser)
    }, [])

    return (<AuthContext.Provider value = {{currentUser}} >{children}</AuthContext.Provider>)
}

export default {
    AuthContext,
    AuthProvider
}

import React，{useffect，useState，createContext}来自“React”
从“/Firebase”导入Firebase
export const AuthContext=createContext（null）
导出常量AuthProvider=（{children}）=>{
常量[currentUser，setCurrentUser]=useState（null）
useffect（（）=>{
Firebase.auth（）.onAuthStateChanged（setCurrentUser）
}, [])
返回（{children}）
}
导出默认值{
AuthContext，
授权提供者
}

这是我的解决方案，看起来效果不错

// context-fb.tsx
import React, { useEffect, useState, createContext } from "react";
import Firebase, { User } from "firebase";

export interface IAuthContext {
  user: User;
}

const AuthContext = createContext<IAuthContext | null>(null);
const AuthProvider: React.FC = ({ children }) => {
  const [currentUser, setCurrentUser] = useState<IAuthContext | null>(null);

  useEffect(() => {
    Firebase.auth().onAuthStateChanged((user: any) => {
      console.log('state set', user)
      setCurrentUser({ user });
    });
  }, []);

  return (
    <AuthContext.Provider value={currentUser}>{children}</AuthContext.Provider>
  );
};

export default {
  AuthContext,
  AuthProvider
};

//context-fb.tsx
从“React”导入React，{useffect，useState，createContext}；
从“Firebase”导入Firebase，{User}；
导出接口IAuthContext{
用户：用户；
}
const AuthContext=createContext（null）；
const AuthProvider:React.FC=（{children}）=>{
const[currentUser，setCurrentUser]=useState（null）；
useffect（（）=>{
Firebase.auth（）.onAuthStateChanged（（用户：任意）=>{
console.log（'状态集'，用户）
setCurrentUser（{user}）；
});
}, []);
返回(
{儿童}
);
};
导出默认值{
AuthContext，
授权提供者
};

Login.tsx的基本部分

import React, { FC, useCallback, useContext } from "react";
import { RouteComponentProps, Redirect } from "react-router";

import Firebase from "firebase";

import Stuff, { IAuthContext } from "../context-fb";

interface LoginProps extends RouteComponentProps<any> {}

const Login: FC<LoginProps> = ({ history }) => {
  const handleLogin = useCallback(
    async event => {
      event.preventDefault();
      const { email, password } = event.target.elements;
      try {
        await Firebase.auth().signInWithEmailAndPassword(
          email.value,
          password.value
        );
        history.push("/dashboard");
      } catch (error) {
        alert(error);
      }
    },
    [history]
  );

  const authInfo = useContext<IAuthContext|null>(Stuff.AuthContext);
  console.log("rendered login", authInfo?.user )

  return authInfo?.user ?  <Redirect to="/home" /> : <div></div>;
};

export default  Login

import React，{FC，useCallback，useContext}来自“React”；
从“react router”导入{RouteComponentProps，Redirect}；
从“Firebase”导入Firebase；
从“./context fb”导入内容，{IAuthContext}；
接口LoginProps扩展了RouteComponentProps{}
常量登录名：FC=（{history}）=>{
const handleLogin=useCallback(
异步事件=>{
event.preventDefault（）；
const{email，password}=event.target.elements；
试一试{
等待Firebase.auth（）.使用Email和Password进行登录(
email.value，
password.value
);
历史。推送（“/仪表板”）；
}捕获（错误）{
警报（错误）；
}
},
[历史]
);
const authInfo=useContext（Stuff.AuthContext）；
console.log（“呈现登录”，authInfo？.user）
返回authInfo？用户？：；
};
导出默认登录名

然后是我的App.tsx

import Stuff from "./context-fb";

const App: React.FC = () => {

  return <IonApp>
    <IonReactRouter>
      <Stuff.AuthProvider>
        <IonRouterOutlet>
          <Route path="/home" component={Home} exact={true} />
          <Route path="/login" component={Login} exact={true} />
          <Route exact path="/" render={() => <Redirect to="/login" />} />
        </IonRouterOutlet>
      </Stuff.AuthProvider>
    </IonReactRouter>
  </IonApp>
};

export default App;

从“/context fb”导入内容；
常量应用程序：React.FC=（）=>{
返回
} />
};
导出默认应用程序；

AuthProps

应该是？？。。。其中是

AuthContext

，我认为从AuthContext提供代码会很有帮助。我添加了AuthContext代码。如果上下文文件的扩展名是.tsxYes，我所有的文件都有.tsx扩展名