Twig模板出现RangeError: Maximum call stack size exceeded的原因分析

你的问题核心在于模板之间形成了循环依赖的闭环，触发了Twig解析时的无限递归，最终导致调用栈超出最大值报错。

咱们拆解下你的模板关系里的矛盾点：

• main.twig 里通过引入（include）加载了 card.twig
• 但 card.twig 又使用继承（extends）去扩展 main.twig

这就形成了死循环：Twig解析main.twig时会加载card.twig；解析card.twig时，又要加载它的父模板main.twig；接着main.twig再次加载card.twig……这个过程会无限重复，直到调用栈被撑爆，抛出RangeError: Maximum call stack size exceeded。

另外你可能混淆了Twig中extends（模板继承）和include（模板引入）的核心用法：

• **继承（extends）**是单向层级关系：子模板扩展父模板，替换/补充父模板的块，最终渲染时只需渲染最底层的子模板，Twig会自动向上拼接所有父模板内容。
• **引入（include）**是内容嵌入：将另一个模板的内容插入当前模板的指定位置，不属于继承关系。

修正后的正确模板结构示例 #

你想要的层级应该是线性继承链，不需要在父模板里include子模板，直接渲染最底层模板即可：

1. main.twig（父模板，定义基础结构和可替换块）

<!DOCTYPE html>
<html>
<head>
    <title>My Page</title>
</head>
<body>
    {% block content %}{% endblock %}
</body>
</html>

2. card.twig（继承main，实现content块，同时定义新的可替换块）

{% extends 'main.twig' %}

{% block content %}
    <div class="card">
        {% block secondContent %}{% endblock %}
    </div>
{% endblock %}

3. rec.twig（继承card，实现secondContent块）

{% extends 'card.twig' %}

{% block secondContent %}
    <p>This is the target content!</p>
{% endblock %}

之后你只需渲染rec.twig，Twig会自动处理继承关系，输出完整页面，不会出现循环递归问题。

如果你的需求确实需要在模板中引入其他模板内容，一定要确保引入和继承的关系不会形成闭环——比如A可以include B，但B不能extends或者include A。

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