TS2345：“字符串 | 类型的参数” null' 不可分配给'string | 类型的参数 网址树'

Question

这个问题的标题是 Angular CLI 编译器抛出的消息。

我的 app.component.ts 中有这个构造函数：

    export class AppComponent {
      constructor(private userService: UserService, private auth: AuthService, router: Router) {
       auth.user$.subscribe(user => {
        if (user) {
         userService.save(user);

         let returnUrl = localStorage.getItem('returnUrl');
         router.navigateByUrl(returnUrl);
      }
    });
  }
}

在上面附加的代码部分中，我在“returnURL”处加了下划线，如果我将光标移到上面，它会显示：

“‘string | null’类型的参数不可分配给‘string | UrlTree’类型的参数。‘null’类型不可分配给‘string | UrlTree’类型。”

我有一个与 Firebase 相关的 user.service.ts：

    import { Injectable } from '@angular/core';
    import { AngularFireDatabase } from 'angularfire2/database';
    import * as firebase from 'firebase';

    @Injectable()
    export class UserService {

        constructor(private db: AngularFireDatabase) { }
  
          save(user: firebase.User) {
          this.db.object('/users/' + user.uid).update({
            name: user.displayName,
            email: user.email
         });
       }
     }

有谁知道编译器的问题是什么？我还附上了控制台消息。

Answer 1

你有这条线

let returnUrl = localStorage.getItem('returnUrl');

该getItem()函数返回一个null | string. 如果该项目不在存储中，则该函数返回 null。

router.navigateByUrl(returnUrl);期望returnUrl是类型string | UrlTree，但从其初始化returnUrl推断， null | string因此错误

有多种方法可以解决这个问题，一种简单的方法是将返回的值类型转换为字符串

let returnUrl = localStorage.getItem('returnUrl') as string;

Answer 2

该错误为您提供了所需的所有信息。

localStorage.getItem返回字符串 或null，并router.navigateByUrl期望参数为 astring或 a UrlTree。您必须在调用之前检查 localStorage.getItem 的返回值以确保它不为 null，router.navigateByUrl因为您无法使用 来调用它null。

let returnUrl = localStorage.getItem('returnUrl');
if (returnUrl) { // i.e, not null and not empty string 
    // now returnUrl cannot be null, so it must be a string, which is valid to use in this call
    router.navigateByUrl(returnUrl);
}

Answer 3

您可以使用感叹号告诉编译器该值不能为空，如下所示：

  let returnUrl = localStorage.getItem('returnUrl');
  router.navigateByUrl(returnUrl!);