Next.js/React/TypeScript中next-base64解码报错及异步导入疑问

根本问题不是导入时机 #

你遇到的服务器错误，核心原因是Next.js路由参数的加载时机，和next-base64的导入方式无关。

在服务器端渲染（SSR）或页面初始加载阶段，router.query.obj是undefined——因为此时路由参数还未完全解析完成。当你直接调用nextBase64.decode(obj)时，传入了undefined，触发了类型错误。而直接打印obj时，客户端hydration完成后参数会更新，所以看起来正常；恢复解码后，客户端渲染阶段参数已存在，所以解码能成功，但服务器端的初始渲染依然会报错。

正确的解决方式 #

不需要修改导入方式，只需要确保解码操作在obj存在时再执行即可，有两种常用方案：

方案1：条件判断+状态管理（适合需要异步处理的场景）

import { useRouter } from 'next/router'
import nextBase64 from 'next-base64';
import { useState, useEffect } from 'react';

const Load = () => {
  const router = useRouter()
  const { obj } = router.query
  const [decodedObj, setDecodedObj] = useState<string | null>(null);

  // 仅在obj存在且变化时执行解码
  useEffect(() => {
    if (typeof obj === 'string') {
      setDecodedObj(nextBase64.decode(obj));
    }
  }, [obj]);

  // 未加载完成时显示占位
  if (!obj) {
    return <p>加载中...</p>;
  }

  return <p>Post: {decodedObj}</p>
}

export default Load

方案2：直接条件判断（简单场景）

import { useRouter } from 'next/router'
import nextBase64 from 'next-base64';

const Load = () => {
  const router = useRouter()
  const { obj } = router.query

  // 未获取到参数时返回加载状态
  if (!obj || typeof obj !== 'string') {
    return <p>加载中...</p>;
  }

  const decoded = nextBase64.decode(obj)
  return <p>Post: {decoded}</p>
}

export default Load

关于导入时机的补充 #

如果确实需要动态导入（比如模块体积大，想优化加载），最佳实践是在组件内部使用await import结合useEffect，但这解决不了你当前的错误——因为不管怎么导入，服务器端初始渲染时obj依然是undefined。示例如下（仅作参考，非当前问题必需）：

import { useRouter } from 'next/router'
import { useState, useEffect } from 'react';

const Load = () => {
  const router = useRouter()
  const { obj } = router.query
  const [decodedObj, setDecodedObj] = useState<string | null>(null);

  useEffect(() => {
    const decodeObj = async () => {
      if (typeof obj === 'string') {
        const nextBase64 = await import('next-base64');
        setDecodedObj(nextBase64.default.decode(obj));
      }
    };
    decodeObj();
  }, [obj]);

  if (!obj) {
    return <p>加载中...</p>;
  }

  return <p>Post: {decodedObj}</p>
}

export default Load

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