Cuando usas setInterval no necesitas un bucle, puesto que precisamente lo haque hace es ejecutar la función repetidamente. Puedes usar un bucle con setTimeout o una sola llamada a setInterval:
const texto = 'En un lugar de la Mancha...';
let nombre = document.getElementById('nombre');
let index=0;
let intervalId = setInterval(function(){
nombre.innerHTML +=texto[index++];
if (index === texto.length) {
clearInterval(intervalId);
}
}, 200);
<p id="nombre"> </p>
Con setTimeout sería algo como:
const texto = 'En un lugar de la Mancha...';
let nombre = document.getElementById('nombre');
for (let i = 0; i < texto.length; i++) {
setTimeout(() => {
nombre.innerHTML +=texto[i];
}, 200*i);
}
<p id="nombre"> </p>