Angular16类型不匹配基础问题?

这个 undefined，是哪里出了问题？感觉很简单，又解决不了。1.todo.service.ts

import { Injectable } from '@angular/core';
import { Todo } from '../interface';

@Injectable({
  providedIn: 'root'
})
export class TodoService {
  private data: Todo[]  = [
    {id: 10, description: "For test purpose", category: 1, content: 'test1'},
    {id: 12, description: "For test2 ", category: 1, content: 'test2'},
    {id: 15, description: "For test3 ", category: 1, content: 'test3'}
  ]
  getTodo(id: number): Todo {
    return this.data.find(item => item.id ===id)
  }

1. interface

export interface Todo {
    id: number;
    description: string;
    category: number;
    content: string;
}

export enum Category {
    html,
    css,
    js
}

1. details

export class DetailComponent implements OnInit{

  todo!: Todo;

  constructor(private route: ActivatedRoute, private todoServe: TodoService) {}

  ngOnInit(): void {
    const id = Number(this.route.snapshot.paramMap.get('id'))
    this.todo = this.todoServe.getTodo(id)
  }
}