Fala Alan, tudo bem?

Além da performance envolvida (getElementById é um pouco mais performático, irei citar alguns testes mais abaixo) podemos considerar:

QuerySelector

A vantagem de seu uso, ao contrário de document.getElementById, document.querySelector pode retornar classes, além disso, é possível usar seletores CSS, o que não é possível fazer com o getElementById.

Exemplo:

document.querySelector("#element a[target]");

document.querySelector("#element a[target]").style.color = 'green';
<span id="element"> <a href="#" target="_blank"> link com target </a> </span>

Que tal uma seleção mais avançada?

document.querySelector("#element ul li:nth-child(2)").style.color = "blue";

document.querySelector("#element ul li:nth-child(2)").style.color = "blue";
<div id="element">
    <ul>
        <li> Item 1 </li>
        <li> Item 2 - Alvo </li>
        <li> Item 3 </li>
    </ul>
</div>

Vale lembrar que o querySelector irá pegar apenas o primeiro elemento que for encontrado no documento.

no exemplo abaixo, apenas no primeiro item foi aplicado o CSS:

document.querySelector('span, p').style.color='lightblue';
<span>[span] -  Aqui será aplicado </span> <br>
<span>[span] -  Aqui não será aplicado </span>  

<p>[p] -  Aqui não será aplicado </p>

Se for preciso realizar a seleção de múltiplos elementos, utilize querySelectorAll que irá retornar um objeto NodeList, para aplicar os estilos em todos, basta aplicar um loop como no exemplo abaixo:

//selecionando todos os elementos span e p
let obj = document.querySelectorAll('span, p'); 

console.log("tipo: " + typeof obj);
console.log("Quantidade: " +obj.length);

//aplicando o estilo em todos os elementos selecionados
for(let i of obj) {  
    i.style.color= "blue";
}
<span>[span] -  Aqui será aplicado </span> <br>
<span>[span] -  Aqui também será aplicado </span> 
<p>[p] -  Aqui também será aplicado </p>

getElementById

O mesmo é um pouco mais performático do que o querySelector e pode ser visto nesse teste aqui e nesse aqui também.

Acredito que o seu uso deve ser feito sempre que for preciso selecionar um elemento pelo id, uma seleção como o exemplo abaixo, considero inviável pelo fato de existir uma função específica para buscas por identificadores.

Exemplo inviável :

document.querySelector("[id=elemento]");

Conclusão

Se precisas selecionar apenas um elemento pelo identificador, é mais viável utlizar document.getElementById pois o mesmo é específico para essa finalidade, caso precise usar uma seleção mais precisa/avançada, use document.querySelector pelo fato de ter a liberdade de utilizar seletores CSS, o que é uma grande vantagem.

Nada impede de usares querySelector para selecionar um elemento pelo id, além do mais, dificilmente uma aplicação sofrerá de baixa performance por conta disso.

Espero ter ajudado, bons estudos :D