Angular服务端分页报TypeError：无法读取undefined的content属性

我开发了一个Spring Boot+Angular应用，正在实现服务端分页功能。应用功能可正常运行，但TypeScript控制台出现错误：ERROR TypeError: Cannot read properties of undefined (reading 'content')。

相关代码 #

user-list.component.ts #

userList(): void{
    this.userService.pagination(20, 1).pipe(
      tap(users => this.setUsers(users.content)),
      map((userData: UserData) => this.dataSource = userData)).subscribe();
  }

  setUsers(content: any){
    this.users = content;
  }

  onPaginateChange(event: PageEvent){
    let page = event.pageIndex;
    let size = event.pageSize;
    page = page + 1;
    this.userService.pagination(size, page).pipe(
      map((userData: UserData) => this.dataSource = userData)).subscribe();
  }

user-service.service.ts #

public pagination(pageSize: number, currentPage:number): Observable<UserData>{
    let params = new HttpParams();
    params = params.append('currentPage', String(currentPage));
    params = params.append('pageSize', String(pageSize));
    return this.http.get<UserData>(this.usersUrl, {params})
  }

user-data.ts #

export class UserData {
  content!: User[];
  pageable!: {
      sort: {
          empty: boolean,
          sorted: boolean,
          unsorted: boolean
      },
      offset: number,
      pageNumber: number,
      pageSize: number,
      paged: boolean,
      unpaged: boolean
  };
  last!: boolean;
  totalPages!: number;
  totalElements!: number;
  size!: number;
  number!: number;
  sort!: {
      empty: boolean,
      sorted: boolean,
      unsorted: boolean
  };
  first!: boolean;
  numberOfElements!: number;
  empty!: boolean;
}

错误原因 #

1. 响应数据类型断言失效：Angular的http.get<UserData>只是类型提示，不会自动把后端JSON转换成UserData实例。如果后端返回的字段名和UserData属性不匹配，会导致content属性为undefined。
2. 嵌套响应未解析：如果后端返回的分页数据包裹在某个父字段（比如{"data": {...}}）里，直接断言成UserData会导致整个对象为undefined，访问content自然报错。
3. 异步时序问题：首次加载或网络波动时，tap操作执行时响应数据尚未完全解析，导致users为undefined。

修复方案 #

1. 空值防护，避免直接访问属性 #

在tap操作中使用可选链和默认值，防止空值报错：

userList(): void{
    this.userService.pagination(20, 1).pipe(
      tap(users => this.setUsers(users?.content || [])),
      map((userData: UserData) => this.dataSource = userData)).subscribe();
  }

2. 匹配后端响应结构 #

检查Spring Boot后端的分页返回格式：

• 如果后端返回的是嵌套结构（如{"data": {...分页数据...}}），修改服务层解析逻辑：

// user-service.service.ts
public pagination(pageSize: number, currentPage:number): Observable<UserData>{
    let params = new HttpParams();
    params = params.append('currentPage', String(currentPage));
    params = params.append('pageSize', String(pageSize));
    return this.http.get<{data: UserData}>(this.usersUrl, {params})
      .pipe(map(res => res.data));
  }

• 确保后端返回的字段名和UserData属性完全一致（比如Spring Data JPA的Page默认返回content字段，若后端自定义了字段名，需同步修改UserData）。

3. 用接口替代类定义UserData #

TypeScript类不会被HTTP响应实例化，改用接口更贴合JSON数据的类型标注：

// user-data.ts修改为接口
export interface UserData {
  content: User[];
  pageable: {
      sort: {
          empty: boolean,
          sorted: boolean,
          unsorted: boolean
      },
      offset: number,
      pageNumber: number,
      pageSize: number,
      paged: boolean,
      unpaged: boolean
  };
  last: boolean;
  totalPages: number;
  totalElements: number;
  size: number;
  number: number;
  sort: {
      empty: boolean,
      sorted: boolean,
      unsorted: boolean
  };
  first: boolean;
  numberOfElements: number;
  empty: boolean;
}

4. 服务层统一处理异常与空数据 #

在服务层添加错误捕获和默认值返回，确保数据流不会出现undefined：

// user-service.service.ts
import { of } from 'rxjs';
import { catchError, map } from 'rxjs/operators';

public pagination(pageSize: number, currentPage:number): Observable<UserData>{
    let params = new HttpParams();
    params = params.append('currentPage', String(currentPage));
    params = params.append('pageSize', String(pageSize));
    return this.http.get<UserData>(this.usersUrl, {params})
      .pipe(
        catchError(() => of({content: [], totalPages: 0, totalElements: 0} as UserData)),
        map(data => data || {content: [], totalPages: 0, totalElements: 0} as UserData)
      );
  }

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