NextJS为input添加type属性报Cannot read properties of undefined错误

• Chrome端报错来自浏览器扩展注入的content.js脚本，属于表单自动填充、密码管理类扩展的内部bug：这类扩展会主动扫描页面中带有type属性的输入框做自动填充适配，你代码中手动控制输入框焦点的逻辑和扩展的扫描逻辑冲突，触发了扩展内部的属性读取错误。移除type属性后扩展会跳过对该输入框的扫描，因此不会报错。
• Firefox端报错属于Next.js的hydration不匹配+路由API调用错误：添加type属性后服务端渲染的输入框结构和客户端渲染后的结构出现了差异，同时你可能在非客户端场景错误调用了next/router的相关方法，二者叠加触发了报错。

1. 排查浏览器扩展冲突
   打开Chrome无痕模式禁用所有扩展后重新访问页面，若报错消失即可确认是扩展兼容问题。可以给input标签添加data-lpignore="true"、data-form-type="other"属性，告知主流表单填充类扩展跳过扫描该输入框即可解决。
2. 修复hydration不匹配问题

• 如果你使用的是Next.js 13+ App Router，直接在组件顶部添加'use client'指令，强制组件仅在客户端渲染，从根源避免服务端和客户端渲染结果不一致的问题。
• 如果需要保留服务端渲染能力，可以将type属性改为客户端挂载后再赋值：

const [inputType, setInputType] = useState<string | undefined>(undefined)
useEffect(() => {
  setInputType("tel")
}, [])
// input标签中写入type={inputType}

3. 优化焦点控制逻辑
   你当前的外层div点击触发focus、输入框blur取消focus的逻辑存在冲突，会导致浏览器的默认输入行为异常，修改点击逻辑如下即可：

const onClick = (e: React.MouseEvent<HTMLDivElement>) => {
  // 只有点击的不是输入框本身时才触发手动focus
  if (e.target !== ref.current) {
    setFocused(true)
  }
}

4. 修复Firefox路由报错
   确认所有next/router的调用都仅在客户端回调（如useEffect、事件回调）中执行，如果你使用的是App Router，直接用next/navigation的API替代next/router即可。如果是开发环境HMR报错，删除项目根目录的.next缓存文件夹后重新启动开发服务即可解决。

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