How to get the URL of a file in a document library using sp.web (SPFX)

Solution 1:

Sample demo:

sp.web.lists.getByTitle('MyDoc2').items.select('Id,FileRef').get().then((items:any) => {      
      items.map((item)=>{       
        console.log(item.FileRef);       
      }) 
    })

Solution 2:

You can even compose the URL by yourself.

[siteurl]/[document library name]/[file name with extension]

where you can get site url in spfx by:

this.context.pageContext.web.absoluteUrl

you can pass this as a prop to your component from your webpartname.ts file