Next.js移动端响应视图滚动报错问题咨询：TypeError: Cannot read properties of undefined (reading 'scrollTo')

部署后会不会出现故障？ #

绝对有概率出问题！虽然本地开发环境下网站还能勉强运行，但生产环境中这类未处理的TypeError很可能导致：

• 滚动相关的交互完全失效
• 用户端弹出错误提示甚至页面白屏
• 生产环境的代码优化（比如Tree Shaking、压缩）可能会放大这类潜在问题，导致功能彻底罢工

Next.js在生产模式下会做更严格的代码校验，这类“读取undefined属性”的错误属于典型的潜在bug，必须在部署前修复。

错误根源分析 #

报错指向的.next\static\chunks\pages\index.js是编译后的代码，_arrayLikeToArray是Babel编译生成的辅助函数，真正的问题出在你自己编写的滚动逻辑里——你大概率在某个地方调用了某个DOM元素的scrollTo方法，但该元素在移动端视图下要么不存在，要么还没完成渲染就被调用了，导致触发Cannot read properties of undefined (reading 'scrollTo')。

具体修复步骤 #

1. 定位源码中的滚动逻辑

先回到你的项目源码（比如pages/index.js或对应的组件文件），找出所有调用scrollTo的代码。常见的场景比如：

// 示例：直接通过DOM选择器获取元素并调用scrollTo
const targetElement = document.getElementById('portfolio-section');
targetElement.scrollTo({ top: 0, behavior: 'smooth' });

或者用React的useRef：

const sectionRef = useRef(null);

const scrollToTop = () => {
  sectionRef.current.scrollTo({ top: 0 });
};

2. 添加存在性校验（最直接的修复）

在调用scrollTo之前，务必先检查目标对象是否存在：

• 针对DOM选择器：

const targetElement = document.getElementById('portfolio-section');
if (targetElement) { // 确保元素存在再调用方法
  targetElement.scrollTo({ top: 0, behavior: 'smooth' });
}

• 针对React useRef：

const sectionRef = useRef(null);

const scrollToTop = () => {
  if (sectionRef.current) { // 校验ref的current值
    sectionRef.current.scrollTo({ top: 0 });
  }
};

3. 适配响应式布局的滚动逻辑

如果是因为响应式布局导致元素在移动端不渲染（比如用display: none隐藏），那需要在滚动逻辑中加入视图尺寸判断，仅在元素存在的视图下执行：

import { useEffect, useState } from 'react';

export default function Home() {
  const [isMobile, setIsMobile] = useState(false);

  useEffect(() => {
    const checkIsMobile = () => {
      setIsMobile(window.innerWidth <= 768); // 根据你的断点调整
    };

    // 初始化判断
    checkIsMobile();
    // 监听窗口 resize
    window.addEventListener('resize', checkIsMobile);
    return () => window.removeEventListener('resize', checkIsMobile);
  }, []);

  const handleScroll = () => {
    if (!isMobile) { // 仅在非移动端执行滚动逻辑
      const targetElement = document.getElementById('portfolio-section');
      if (targetElement) targetElement.scrollTo({ top: 0 });
    }
  };

  return (
    {/* 页面内容 */}
    <button onClick={handleScroll} disabled={isMobile}>回到顶部</button>
  );
}

4. 用条件渲染避免无效调用

如果滚动逻辑所在的组件仅在桌面端需要，可以直接用条件渲染控制组件的渲染，从根源避免调用不存在的元素：

export default function Home() {
  const [isMobile, setIsMobile] = useState(false);

  useEffect(() => {
    const checkIsMobile = () => {
      setIsMobile(window.innerWidth <= 768);
    };
    checkIsMobile();
    window.addEventListener('resize', checkIsMobile);
    return () => window.removeEventListener('resize', checkIsMobile);
  }, []);

  return (
    <div>
      {/* 仅在桌面端渲染滚动相关组件 */}
      {!isMobile && <DesktopScrollComponent />}
      {/* 移动端专属内容 */}
    </div>
  );
}

5. 开启严格模式提前排查

在next.config.js中开启React严格模式，能帮你在开发阶段更早发现这类潜在问题：

module.exports = {
  reactStrictMode: true,
};

严格模式会重复调用部分生命周期函数，帮你捕捉未处理的undefined、内存泄漏等问题。

最后验证 #

修复完成后，一定要在生产模式下测试：

npm run build && npm run start

切换到移动端视图，确认错误不再出现，再进行部署。

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