Rails7中无法复现Turbo Frame‘无匹配框架’错误的问题

问题背景 #

按照教程构建Quote应用时，预期创建新Quote操作会触发Turbo Frame的“Response has no matching ”错误，但实际仅触发页面刷新，无任何报错日志。相关视图代码如下：

index.html.erb #

<main class="container">
  <%= turbo_frame_tag "first_turbo_frame" do %>
    <div class="header">
      <h1>Quotes</h1>
      <%= link_to "New quote",
                new_quote_path,
                class: "btn btn--primary" %>
    </div>
  <% end %>
  <%= render @quotes %>
</main>

new.html.erb #

<main class="container">
  <%= link_to sanitize("&larr; Back to quotes"), quotes_path %>
  <div class="header">
    <h1>New quote</h1>
  </div>
  <%= turbo_frame_tag "diff_frame" do %>
    <%= render "form", quote: @quote %>
  <% end %>
</main>

核心原因 #

Turbo Frame的“无匹配框架”错误仅在Turbo Frame发起的导航/提交请求下才会触发。当前代码未满足这个前提：

• 页面中的链接和表单默认使用Turbo Drive发起普通导航请求，而非Turbo Frame请求；
• 只有当请求明确绑定到某个Turbo Frame（通过data-turbo-frame属性）时，Turbo才会校验响应中是否存在同名框架。

排查与复现步骤 #

1. 确认Turbo启用状态 #

检查app/javascript/application.js是否导入Turbo：

import "@hotwired/turbo-rails"

若未导入，Turbo功能不会生效，所有请求均为普通页面跳转。

2. 强制发起Turbo Frame请求 #

要复现错误，需让链接或表单通过指定Turbo Frame发起请求：

场景1：点击“New quote”时触发错误

修改index.html.erb中的链接，添加data-turbo-frame属性绑定到first_turbo_frame：

<%= link_to "New quote",
          new_quote_path,
          class: "btn btn--primary",
          data: { turbo_frame: "first_turbo_frame" } %>

点击该链接后，Turbo会尝试用first_turbo_frame加载new.html.erb内容，但new.html.erb中无同名框架，浏览器控制台会立即出现预期错误。

场景2：提交表单时触发错误

修改_form.html.erb的表单，绑定到diff_frame：

<%= form_with(model: quote, data: { turbo_frame: "diff_frame" }) do |form| %>
  <!-- 表单字段 -->
  <%= form.submit "Create Quote" %>
<% end %>

提交表单后，若控制器重定向到quotes_path，而index.html.erb中无diff_frame，则会触发“Response has no matching ”错误。

3. 验证请求与响应 #

打开浏览器开发者工具的Network标签：

• 检查请求头是否包含Turbo-Frame，确认是Turbo Frame请求；
• 查看响应的HTML内容，确认是否存在请求绑定的Turbo Frame；
• 查看Console标签，Turbo的错误日志会直接输出在这里。

4. 控制器响应检查 #

确保quotes_controller.rb的create动作返回正确响应：

def create
  @quote = Quote.new(quote_params)
  if @quote.save
    redirect_to quotes_path, notice: "Quote created successfully"
  else
    render :new, status: :unprocessable_entity
  end
end

保存成功时的重定向会让Turbo加载index.html.erb，因无匹配框架触发错误。

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