React createContext承诺类型与typescript问题

Question

所以，我使用firebase登录电子邮件链接。我想在上下文文件中检查链接然后像这样登录:

const defaultValue = {};
interface AuthContextInterface {
SignInWithLink: (email: string | null) => {};
}
const UserContext = createContext<AuthContextInterface>(
defaultValue as AuthContextInterface
);
export const AuthContextProvider = ({
children,
}: {
children?: React.ReactNode;
}) => {
const SignInWithLink = (email: string) =>
signInWithEmailLink(auth, email, window.location.href)
.then((result) => {
window.localStorage.removeItem("emailForSignIn");
console.log("RESULT", result.user);
})
.catch((error) => {
console.log("ERRORRrr", error);
});
return (
<UserContext.Provider value={SignInWithLink}>
{children}
</UserContext.Provider>
);
};
export const UserAuth = () => {
return useContext(UserContext);
};

在组件中，我像这样调用函数:

const { SignInWithLink } = UserAuth();
if (isSignInWithEmailLink(auth, window.location.href)) {
let email = window.localStorage.getItem("emailForSignIn");

SignInWithLink(email);
}

当我悬停在<UserContext.Provider value={SignInWithLink}中的value时，我得到这个错误:

Type '(email: string) => Promise<void>' is not assignable to type 'AuthContextInterface'.ts(2322)
index.d.ts(328, 9): The expected type comes from property 'value' which is declared here on type 'IntrinsicAttributes & ProviderProps<AuthContextInterface>'

我是新的打字，所以请谁帮助我如何解决这个问题?

Answer 1

value={SignInWithLink}没有称为SignInWithLink的字段，根据您的界面。改为使用value={{SignInWithLink}}>