React useContext + TS 错误：“'{}' 上不存在属性”答案

【问题标题】：React useContext + TS error: "property does not exist on '{}'"React useContext + TS 错误：“'{}' 上不存在属性”
【发布时间】：2021-03-15 14:40:24
【问题描述】：

我设置了一个分发 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 '{}'.

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

【问题讨论】：

您能展示一下您是如何创建上下文的吗？

标签： reactjs typescript use-context

【解决方案1】：

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

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

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

这里有一个小的codesandbox 来检查一下。还可以阅读更多关于使用 Typescript 和 Context Api here。

【讨论】：