时间戳

首页 > 解决方案 > 当我无法访问定义时，如何处理 TypeScript 中可能的空值

reactjs - 当我无法访问定义时，如何处理 TypeScript 中可能的空值

问题描述

我正在用 TypeScript 编写一个 React 应用程序，并使用 Firebase，我有几个类似的错误。

我写了我的 Firebase 类：

class Firebase {

  constructor() {
    app.initializeApp(config);
  }

  // *** Auth API ***
  doSignInWithEmailAndPassword = (email, password) => app.auth().signInWithEmailAndPassword(email, password)
  
  doEmailUpdate = (email:string) => app.auth().currentUser.updateEmail(email)
  
  doPasswordUpdate = (password:string) => app.auth().currentUser.updatePassword(password)

  doPasswordReset = (email:string) => app.auth().sendPasswordResetEmail(email)

  doSignOut = () => app.auth().signOut();

  getUserIdToken = () => app.auth().currentUser.getIdToken();

}
 
export default Firebase;

问题 1： doEmailUpdate并且doPasswordUpdate都以错误“对象可能为空”突出显示。这是因为app.auth().currentUser如果用户未登录，则为 null。我可以通过使用app.auth().currentUser?并确保仅在用户登录时才调用它来解决此问题，但有更好的方法吗？我试着做

if(app.auth().currentUser !== null) ...

但仍然有错误。

问题 2： getUserIdToken还突出显示app.auth().currentUser可能为 null，但我可以再次使用 `app.auth().currentUser? 解决这个问题。但是，我在一个组件中使用：

const MyComponent= ({ firebase}) => {

  useEffect(() => {
    
    (firebase.getUserIdToken())
      .then((token:string) => { ... })
  })

})

我收到错误Object is possibly 'undefined'. 这是因为 getUserIdToken 的返回类型是Promise<string> | undefined

显然我无法更改 Firebase 函数的返回类型，那么我该如何解决呢？

标签： reactjstypescript

解决方案

使用Promise.reject()if app.auth().currentUseris undefined || null，这样您将返回 aPromise<string | undefined>而不是Promise<string> | undefined.

我会重构getUserIdToken看起来像这样

getUserIdToken = () => {
  if (app.auth().currentUser) {
    return app.auth().currentUser.getIdToken()
  }
  return Promise.reject();
};

推荐阅读