类型不可分配（React + Typescript + Firebase）答案

【问题标题】：Type not assignable (React + Typescript + Firebase)类型不可分配（React + Typescript + Firebase）
【发布时间】：2020-09-06 16:46:18
【问题描述】：

我是 typescript 的新手，正在将我的 react 应用迁移到使用 ts。

我正在使用 firebase 身份验证服务，但遇到了一些我似乎无法解决的类型问题。请指教！

import React, { useEffect, useState } from 'react';
import app from './firebase';

export const AuthContext = React.createContext(null);

export const AuthProvider: React.FC<Props> = ({ children }) => {
  const [currentUser, setCurrentUser] = useState(null);
  const [pending, setPending] = useState(true);

  useEffect(() => {
    app.auth().onAuthStateChanged((user) => {
      // ts error here
      setCurrentUser(user);
      setPending(false);
    });
  }, []);

  if(pending){
    return <>Loading...</>;
  }

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

interface Props {
  children: React.ReactNode;
}

setCurrentUser(user); 给我一个错误 Argument of type 'User | null' is not assignable to parameter of type 'SetStateAction<null>'.

和

value={{ currentUser }} 给我一个错误Type '{ currentUser: null; }' is not assignable to type 'null'.

【问题讨论】：

标签： reactjs typescript firebase-authentication

【解决方案1】：

从firebase返回的用户参数，它的类型不能赋值为null，所以你应该为那个用途创建一个类型或接口，或者你可以尝试像这样添加'any'：

const [currentUser, setCurrentUser] = useState<any>(null);

【讨论】：

【解决方案2】：

对我来说，我添加到上下文中并且它起作用了

export const AuthContext = createContext<any>(null)

【讨论】：