TS报错Property 'value' does not exist on type 'HTMLElement' Vue+Firebase登录问题

问题根因 #

TypeScript 中 document.getElementById() 方法默认返回泛用类型 HTMLElement，该类型没有定义 value 属性，只有表示输入框的子类型 HTMLInputElement 才具备 value 属性，因此类型校验不通过触发报错。

解决方案一：类型断言（快速修复） #

直接将获取到的DOM节点断言为HTMLInputElement类型即可，修改后的代码如下：

// 断言为HTMLInputElement类型
const txtEmail = document.getElementById('email') as HTMLInputElement;
const txtPassword = document.getElementById('psw') as HTMLInputElement;
const btnLogin = document.getElementById('login');
const btnSignUp = document.getElementById('register');
const btnLogout = document.getElementById('logout');


btnLogin.addEventListener('click', e => {
    const email = txtEmail.value;
    const pass = txtPassword.value;
    const auth = firebase.auth();
    // 登录逻辑
    const promise = auth.signInWithEmailAndPassword(email, pass);
    promise.catch(e => console.log(e.message));
});

如果需要更严谨的空值校验，可以在取值时添加可选链操作：const email = txtEmail?.value ?? ''，避免节点不存在时报运行时错误。

解决方案二：Vue 模板Ref绑定（更符合Vue最佳实践） #

Vue项目中不推荐直接操作原生DOM，建议通过ref绑定输入框获取值：

1. 模板中给输入框绑定ref

<template>
  <input type="email" ref="txtEmail" id="email">
  <input type="password" ref="txtPassword" id="psw">
  <button @click="handleLogin">登录</button>
</template>

2. 脚本中声明ref并取值

import { ref } from 'vue'
// 声明对应类型的ref
const txtEmail = ref<HTMLInputElement>()
const txtPassword = ref<HTMLInputElement>()

const handleLogin = () => {
  // 取值时先判断存在性
  const email = txtEmail.value?.value ?? ''
  const pass = txtPassword.value?.value ?? ''
  const auth = firebase.auth()
  auth.signInWithEmailAndPassword(email, pass)
    .catch(e => console.log(e.message))
}

内容的提问来源于stack exchange，提问作者Daniel Radosa