Angular组件传值后控制台报错：无法读取null的'id'属性

这个报错的核心原因很明确：在ListCategoryComponent的ngOnInit钩子执行时，category或者category.latest_thread是null/undefined，导致你尝试访问它们的id属性时抛出错误。你之前更换生命周期钩子没解决，大概率是没针对异步数据延迟赋值和后端数据可能存在空值这两个关键点处理。

下面给你几个针对性的解决方案，按优先级排序：

1. 先排查后端数据是否存在空值 #

首先确认后端返回的JSON数据里：

• 每个category对象是否都存在（没有null项）
• 每个category的latest_thread字段是否都有值，有没有出现null的情况

如果后端确实会返回latest_thread为null的场景，那必须在代码里处理这种空值情况。

2. 在子组件里添加空值检查（最直接的修复） #

修改List-category.component.ts的ngOnInit钩子，在访问属性前先判断对象是否存在：

@Input() category: Category; 
categoryId: string; 
latestThreadId: string;

ngOnInit() {
  // 先确保category存在
  if (this.category) {
    this.categoryId = `${this.category.id}-${this.category.slug}`;
    
    // 再检查latest_thread是否存在，避免访问null的属性
    if (this.category.latest_thread) {
      this.latestThreadId = `${this.category.latest_thread.id}-${this.category.latest_thread.slug}`;
    } else {
      // 可以根据业务需求设置默认值，比如空字符串
      this.latestThreadId = '';
    }
  }
}

3. 利用ngOnChanges处理异步输入属性 #

因为你的sections是从后端异步获取的，父组件的*ngFor可能在数据还没返回时就渲染了子组件，导致category在ngOnInit时还没被赋值。这时候用ngOnChanges会更合适，它会在输入属性变化时触发：

import { SimpleChanges } from '@angular/core';

// ...其他代码

@Input() category: Category; 
categoryId: string; 
latestThreadId: string;

ngOnChanges(changes: SimpleChanges) {
  // 检查category是否有更新，且当前值不为空
  if (changes.category && changes.category.currentValue) {
    const currentCategory = changes.category.currentValue;
    this.categoryId = `${currentCategory.id}-${currentCategory.slug}`;
    
    if (currentCategory.latest_thread) {
      this.latestThreadId = `${currentCategory.latest_thread.id}-${currentCategory.latest_thread.slug}`;
    } else {
      this.latestThreadId = '';
    }
  }
}

4. 在父组件中用*ngIf避免渲染空数据 #

在List-section.component.html里，给子组件添加*ngIf，确保只有当category和latest_thread都存在时才渲染组件，从根源上避免报错：

<app-list-category 
  *ngFor="let category of categories" 
  [category]="category" 
  class="forum__post"
  *ngIf="category && category.latest_thread"
> 
</app-list-category>

另外，也可以给List-section.component.ts的categories初始化添加空值保护，避免*ngFor遍历undefined：

@Input() section; 
categories: any[] = []; // 初始化为空数组

ngOnInit() {
  if (this.section) {
    // 确保categories是数组，避免返回null导致*ngFor报错
    this.categories = this.section['categories'] || [];
  }
}

为什么之前更换生命周期钩子没用？ #

比如AfterContentInit，它只在组件内容初始化完成后执行一次，但你的数据是异步加载的，可能在这个钩子执行后category才被赋值；而如果ngOnChanges没做空值判断，依然会在输入属性为null时触发报错，所以关键还是要做空值检查。

内容的提问来源于stack exchange，提问作者Bartłomiej Blue