Why the same getDoc request returns one time Promise, another time String?

I'm trying to make a reading from firebase, and get a specific field from a collection record.

I have a function that makes the reading from the firestore (getCityName) and there is another function that calls it, which sends an id and should receive a string (renderCities).

Bottom line, instead of getting a string, I get a Promise, the point is that if I do console.log in getCityName, before the return, I get a String, and in the value returned from getCityName into renderCities, I get a Promise (either way, of course the goal in the end is to get a String and not printing to the console.log).

What is the difference between the things? Why one time I get a String and another time I get a Promise? I tried many things, using 'async' and 'await' or with '.then', but at best it just didn't work, at worst there were all sorts of errors...

Cities.Services.js:

getCity = async (id) => {
  const cityDoc = doc(db, "Cities", id); 
  return getDoc(cityDoc);
};

getCityName = async (id) => {
  const docSnap = await this.getCity(id);
  if (docSnap.data() === undefined || docSnap.data() === null)
    console.log(docSnap.data(), id);
  else {
    console.log(docSnap.data().city_name); //return String
    return docSnap.data().city_name;  //return Promise
  }
};

LocalCommiteHandler.js:

const renderCities = (src) => console.log((CitiesServices.getCityName(src)));

{props.cities.length > 0
          ? props.cities.map((item, index) =>
              renderCities(item)
            )
          : "No Cities."}

Versions: firebase: 9.6.5 react: 17.0.2