In general, don't mix .then/.catch handlers with async/await. There's usually no need, and it can trip you up like this.

The problem is that your fulfillment handler (the .then callback) doesn't return anything, so the promise it creates is fulfilled with undefined.

You could return data, but really just don't use .then/.catch at all:

async function getImageURL(imgUrl) {
    const res = await fetch(imgUrl);
    if (!res.ok) {
        throw new Error(`HTTP error ${res.status}`);
    }
    const resultImg = await res.json();
    return resultImg.sprites.other.dream_world.front_default;
}

[Note I added a check of res.ok. This is (IMHO) a footgun in the fetch API, it doesn't reject its promise on HTTP errors (like 404 or 500), only on network errors. You have to check explicitly for HTTP errors. (I wrote it up on my anemic old blog here.)]

There's also a problem where you use getImageURL:

// Incorrent
for (let i = 0; i < data.results.length; i++) {
    main.innerHTML=main.innerHTML+`<p><a href=${getImageURL(data.results[i].url)}>${data.results[i].name}</a></p>`;
}

The problen here is that getImageURL, like all async functions, returns a promise. You're trying to use it as those it returned the fulfillment value you're expecting, but it can't — it doesn't have that value yet.

Instead, you need to wait for the promise(s) youre creating in that loop to be fulfilled. Since that loop is in synchronous code (not an async function), we'd go back to .then/.catch, and since we want to wait for a group of things to finish that can be done in parallel, we'd do that with Promise.all:

// ...
const main = document.getElementById('main');
const html = `<p><a href='${data.next}'>Next</a></p>`;
Promise.all(data.results.map(async ({url, name}) => {
    const realUrl = await getImageURL(url);
    return `<p><a href=${realUrl}>${name}</a></p>`;
}))
.then(paragraphs => {
    html += paragraphs.join("");
    main.innerHTML = html;
})
.catch(error => {
    // ...handle/report error...
});

For one, your

.then (data => {
            console.log(//...

at the end of the promise chain returns undefined. Just remove it, and if you want to console.log it, do console.log(resultImg) in the next statement/next line, after await.

This the final version that accomplish my goal. Just want to leave this just in case someone finds it usefull. Thanks for those who answer!

function script() {
    const url = 'https://pokeapi.co/api/v2/pokemon/?offset=20&limit=20'

    const result = fetch(url)
    .then( (res)=>{
        if(res.ok) {
            return res.json()
        } else {
            console.log("Error!!")
        }
    }).then( data => {
        console.log(data)

        const main = document.getElementById('main');

        main.innerHTML=`<p><a href='${data.next}'>Proxima Página</a></p>`;

        Promise.all(data.results.map(async ({url, name}) => {
            const realUrl = await getImageURL(url);
            return `<div><a href=${realUrl}>${name}</a></div>`;
        }))
        .then(paragraphs => {
            main.innerHTML=main.innerHTML+paragraphs;
        })
        .catch(error => {
            console.log(error);
        });
    })
}

 async function getImageURL(imgUrl) {
   
    const res = await fetch(imgUrl);

    if(!res.ok) {
        throw new Error(`HTTP Error ${res.status}`)
    } 
    
    const resultImg = await res.json();

    return resultImg.sprites.other.dream_world.front_default
}