React useContext + TS 错误：“‘{}’上不存在属性”

Question

我设置了一个上下文来分发 Firebase 身份验证对象，如下所示：

export function AuthProvider(props: {children: React.ReactNode}) {
    const [user, setUser] = useState<IUser>({uid: ""});

    useEffect(() => {
        const unsubsribe = firebaseApp.auth().onAuthStateChanged(user => {
            if (user) {
                setUser(user);
                console.log("user: " + user.uid);
            }
        });
        return () => {
            unsubsribe();
        }
    }, [user]);

    const authContextValue = {
        firebaseApp,
        user,
        signOut: () => firebaseApp.auth().signOut(),
        signIn: (email: string, password: string) => firebaseApp.auth().signInWithEmailAndPassword(email, password),
    };

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

export const useAuth = () => React.useContext(AuthContext);

我尝试像这样使用传递的对象：

const {user} = useAuth();
    const {signOut} = useAuth();

这会导致此错误：Error:(17, 12) TS2339: Property 'user' does not exist on type '{}'.

我知道上下文正在提供对象（在将消费者组件转换为 TS 之前，它在纯 JS 中工作） - 那么为什么 TypeScript 认为只传递了 {} （空对象）？将 useContext 挂钩与 TypeScript 结合使用的正确模式是什么？

Answer 1

创建一个接口并将其分配给您的钩子：

interface AuthContextType {
  user: IUser;
  signOut: () => void;
  signIn: () => void;
}

export const useAuth = () => React.useContext(AuthContext) as AuthContextType;

这是一个小代码沙箱，可以查看。另请在此处阅读有关将Typescript与Context Api 结合使用的更多信息。