Angular登录重定向遇类型错误：string|null无法赋值给string|UrlTree

报错原因是localStorage.getItem('returnUrl')的返回值类型为string | null，而router.navigateByUrl()要求参数类型为string | UrlTree，null类型不被接受。

解决方法 #

给获取到的returnUrl设置默认值，确保它始终是字符串类型，同时可以在跳转后清除localStorage中的记录，避免后续登录重复跳转：

修改app.component.ts中的代码：

import { Component } from '@angular/core';
import { Router } from '@angular/router';
import { AuthService } from './auth.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  constructor(private auth : AuthService, private router:Router){
    auth.user$.subscribe(user=>{
      if(user){
        // 给returnUrl设置默认值，确保类型为string
        let returnUrl = localStorage.getItem('returnUrl') || '/';
        router.navigateByUrl(returnUrl);
        // 跳转后清除localStorage中的returnUrl，避免后续登录重复使用
        localStorage.removeItem('returnUrl');
      }
    });
  }
}

补充说明 #

• 在auth.service.ts中你已经给returnUrl设置了默认值'/'，但localStorage可能因为手动清除等情况变为null，所以在获取时必须再次处理。
• 类型断言（比如localStorage.getItem('returnUrl') as string）虽然能暂时消除类型报错，但不安全，不推荐使用——它无法保证returnUrl一定存在，可能引发运行时问题。

内容的提问来源于stack exchange，提问作者Jayanatha Nanayakkara