Pessoal, por favor, peço ajuda.

Estou desenvolvendo um projeto, porém como o menu superior e lateral são sempre iguais, resolvi separá-los em paginas distintas, para facilitar a mudança futura e também, para melhor organização e estou chamando com a função load dentro de uma página que no caso é system.html, segue exemplo:

System.html

...
<nav class="navbar navbar-expand navbar-light bg-white topbar mb-4 static-top shadow" id="topBar"></nav>
... 

<script src="js/esc-2.js"></script>
<script src="js/auth/auth-watcher.js"></script>

Dentro do js esc-2.js tenho a função load, que vai inserir código html dentro da system.html.

E dentro da auth-watcher.js, tenho o código do innerHTML segue:

esc-2.js
$('#topBar').load('template/topbar.html');

e dentro da auth-watcher.js este código:

var userName = document.getElementById("userName");
var avatar = document.getElementById("avatar");
firebase.auth().onAuthStateChanged(function(user) {
if (user != null) {
userName.innerHTML = profile.displayName;
avatar.src = profile.photoURL;
});
} else {
// User is signed out.
window.location.href = "index.html";
// ...
}
});

Para finalizar na página template da topbar, temos certos os nomes dos id´s.

topbar.html

Quando o código esta diretamente no system.html, funciona normalmente, porém ao utilizar a função load, o nome do usuário e foto não são renderizados no nav.

Deixei bem simples e somente o código necessário para que entendessem, porém não consigo fazer um innerHTML dentro de um HTML utilizando a função load.

Para informar, os códigos estão sendo carregados normalmente, o conteúco aparece, a única coisa que não funciona é o innerHTML dentro da página, o que antes era modificado automaticamente com o nome de usuário e a foto do avatar, agora não consegue ser modificado pelos dados da variável innerHTML.

Como posso fazer isto?

Obs.: Ja tentei utilizar o script "<script src="https://www.w3schools.com/lib/w3.js"></script>" sem sucesso também.