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

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

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

localStorage.getItem 返回字符串或 null，而 router.navigateByUrl 需要 string 或 UrlTree 的参数。您必须在调用 router.navigateByUrl 之前检查 localStorage.getItem 的返回值以确保它不为 null，因为您不能使用 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 2

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

test <- tibble(project = c("big", "low", "medium", "superbig"),
               capacity = c(10, 5, 16, 3),
               date = c("Aug 2021", "Aug 2021", "Sep 2021", "Sep 2021"),
               date_num = as.Date("2021-08-01", "2021-08-01", "2021-09-01", "2021-09-01")) %>%
  dplyr::mutate(date = reorder(date, date_num))

plot_ly(test, x = ~date, y = ~capacity, type = 'bar', name = ~project, 
        color = ~project, colors = ~all_colors[seq_along(unique(project))]) %>%
  layout(legend = list(orientation = 'h', x = .5, xanchor = "center", y = -.3), barmode = "stack")

Answer 3

你有线路

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;