Add a collection into subcollection dynamically(or get the unique Id from a subcollection?)

Kia ora everyone, frankly I am not very good at front-end development but I have to do this job. My question is I tried to add a new collection into documents in my existed subcollection dynamically.

my firebase is like:

userProfile(Collection) | user(document) | list(Collection) | list1(document),list2…

Now I wanna create a new collection “task”, I hope users can add a task on the special list(such as list1) page then the certain task will be added into list1’s document, the same if they do it in list2 page.

I have two schemes, the first one is to get unique id of different lists, then use collection() and doc(), but it did not work in my way. Here is my code in the task.ts:

import { Injectable } from '@angular/core';
import * as firebase from 'firebase/app';
import 'firebase/auth';
import 'firebase/firestore';
import {ListDetailPage} from "../../pages/list-detail/list-detail.page"
import { ListService } from '../../services/list/list.service';
import { ActivatedRoute } from '@angular/router';

@Injectable({
  providedIn: 'root'
})

export class TaskService {
 public taskRef: firebase.firestore.CollectionReference;
 public currentList :any = {};
 public listId = this.route.snapshot.paramMap.get('id');

 constructor(private route:ActivatedRoute,) {

  this.loadTaskRef(this.currentList);

  firebase.auth().onAuthStateChanged(list => {
    this.loadTaskRef(this.listId);
  });


 }

  loadTaskRef(listId:any): void{
      if(listId){
        this.taskRef = firebase
        .firestore()
        .collection("/list-detail/").doc(this.listId)
        .collection("/task");
      }
   }

The second plan is to create the task collection behind user(document), then assign different lists’ id. However, still require me to get the id and I am confused about that.

Can someone give me some suggestions about how to do that? Thanks a lot.