how to get various lists present in a SharePoint online site in a dropdown for webpart properties spfx

Question

Below is the method which i am using, what i am doing wrong in the below method? Please let me know.

      private async GetLists(): Promise<any>
          {
          console.log("Hitting GetLists Method");
       return await 
          this.context.spHttpClient.get(`${this.context.pageContext.web.absoluteUrl}/_api/web/lists`, 
            SPHttpClient.configurations.v1,{
             headers: [
                ['accept', 'application/json;odata=nometadata'],
                        ['odata-version', '']
                    ]
                   }).then((data) => 
                 {
                        //console.log("Total number of lists are " + data.length);
                                 return data;
                    });
                    }

Answer 1

My test code for your reference:

private GetLists(): Promise<any> {

    return this.context.spHttpClient.get(this.context.pageContext.web.absoluteUrl + "/_api/web/lists", SPHttpClient.configurations.v1,{
      headers: [
         ['accept', 'application/json;odata=nometadata'],
                 ['odata-version', '']
             ]
            })

      .then((response: SPHttpClientResponse) => {
        
        return response.json();

      }).then(response=>console.log(response));

  }

Test result:

Answer 2

Try to use PnPjs:

private GetLists(): Promise<any> {
    return sp.web.lists.get().then((data) => {
      console.log("Total number of lists are " + data.length);
      return data;
    });
}

https://pnp.github.io/pnpjs/getting-started/