Next.js中使用dangerouslySetInnerHTML加载HTML文件遇空白屏求助

安全阿岳

2026-6-24

解决Next.js中dangerouslySetInnerHTML展示HTML空白的问题

按以下步骤排查并修复问题：

1. 确认静态文件存放位置

Next.js规定静态资源必须放在项目根目录的public文件夹下，将你的index.html移到public目录中，否则fetch请求会找不到文件。

2. 修正Fetch请求路径

原代码中fetch('index.html')是相对路径，在不同路由场景下会出现路径错误，改成绝对路径fetch('/index.html')，确保请求指向public目录下的目标文件。

3. 处理完整HTML模板的嵌套冲突

如果你的index.html是包含<html>、<head>、<body>的完整模板，直接塞入React组件的div中会导致DOM嵌套异常，浏览器无法正常解析。可以用DOMParser提取<body>内的有效内容：

修改后的代码：

import React, { useState, useEffect } from 'react';

function MyComponent() {
  const [htmlContent, setHtmlContent] = useState('');

  useEffect(() => {
    async function fetchHtml() {
      try {
        const response = await fetch('/index.html');
        const html = await response.text();
        // 解析HTML并提取body内的内容
        const parser = new DOMParser();
        const doc = parser.parseFromString(html, 'text/html');
        const bodyContent = doc.body.innerHTML;
        setHtmlContent(bodyContent);
      } catch (error) {
        console.error('Error fetching HTML file:', error);
      }
    }

    fetchHtml();
  }, []);

  return (
    <div dangerouslySetInnerHTML={{ __html: htmlContent }} />
  );
}

export default MyComponent;